SimpleForm with ResponsiveGridLayout

[fahad_saplearning]

Hello All,

I am trying to develop the following screen using SimpleForm ResponsiveGridLayout (XML view).

I have tried various options by going through the documentation, however did not succeed. Can anyone please help with the code by which I can accomplish the above scenario?

Regards,

Faddy

[former_member293484 · Accepted solution]

Hi Faddy,

Please use span to align labels and input fields.

Regards

Pranav

[fahad_saplearning · Accepted solution]

Hi Pavan,

Thanks for your response.

As I am novice in this area, could you please provide code snippet?

Regards,

Faddy

[former_member293484 · Accepted solution]

Hi Faddy,

Please use this Code to align the input fields.

<Input >

  <layoutData>

  <l:GridData span="L2 M3 S10"/>

  </layoutData>

  </Input>

Regards

Pranav

[fahad_saplearning · Accepted solution]

Hello Pranav,

Thanks for your inputs.

I have tried with the code snippet provided. Here is my code.

<form:SimpleForm layout="ResponsiveGridLayout">

  <form:content>

  <Label text="First Name">

  </Label>

  <Input >

  <layoutData>

  <layout:GridData span="L2 M3 S10"/>

  </layoutData>

  </Input>

  <Label text="Last Name"></Label>

  <Input >

  <layoutData>

  <layout:GridData span="L2 M3 S10"/>

  </layoutData>

  </Input>

  <Button text = "Submit">

  <layoutData>

  <layout:GridData span="L2 M3 S10"/>

  </layoutData>

  </Button>

  </form:content>

</form:SimpleForm>

Output:

However, the output looks different w.r.to my requirement. Can you please help?

Also, what is meant by span="L2 M3 S10"? Can I give this inside <SimpleForm> tag?

Regards,

Faddy

[former_member293484 · Accepted solution]

Hi,

Please use the following code above the Button.

<Label text = ""/>

Regards

Pranav

[Former Member · Accepted solution]

Hi Faddy,

How about this: View.xml · GitHub

And to understand  "L2 M3 S10 ". Consider your screen is divided into 12 columns and "L2" mean on large screen(Like desktop) a control(like button or input) will occupy 2 columns and for medium screen "M3"(like Tablet/iPad ) 3 columns will be occupied and so on.

For more details refer to this :JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.layout.form.ResponsiveG...

Regards,

Devaarth

[fahad_saplearning · Accepted solution]

Hi Pranav,

This works. However, there is an issue.

If I resize my browser, each control comes line by line. During this time, there is a blank line between last input field and the button. How can I avoid that?

Regards,

Faddy

[fahad_saplearning · Accepted solution]

Hi Devaarth,

Thanks for a detailed picture.

When I used it inside <SimpleForm>, I did not see any effect!! What could be the reason?

Regards,

Faddy

[Former Member · Accepted solution]

Hi Faddy,

The may be due to the fact that some of the layout functions and properties are not compatible with "SimpleForm" and works only with "Form".

And also if you will check this link JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.commons.form.SimpleForm SimpleForm for sap.m is deprecated ,so it's better you use "Form" or switch to sap.ui.layout with different set of functions and properties

Regards,

Devaarth

[fahad_saplearning · Accepted solution]

HI Devaarth,

Thanks.

In fact, I don't use sap.ui.commons.SimpleForm. Instead, I use sap.ui.layout.form.SimpleForm which does not seem to be deprecated.

Regards,

Faddy

[fahad_saplearning · Accepted solution]

Can anyone help me on this please?

Regards,

Faddy