Form Design with Description Issue?

[Jayakrishnan]

Hi All,

I am working on one Custom SAPUI5 Application. In my scenario, i need to use 4 selection control and one button inside a panel. Please refer the image below for more understanding.

It contains, 2 input with value help,2 combo boxes and search button. After the selection made on both input, i need to show the description for the selected data below to the input box.

Initially i designed this with Horizontal Layout and Vertical layout. But as i used layouts, it fits exactly. It is not a responsive one.it comes with scroll bar on mobile.

Now i want to change this to responsive design (Something like Form). So when i open it on mobile it should appear one by one with description.

 <layout:HorizontalLayout class="sapUiResponsiveMargin">
    <layout:VerticalLayout class="sapUiSmallMargin">
	<Input id="id_vh_user_group" value="" type="Text" placeholder="{i18n>placeholder_usergroup}" showSuggestion="false" showValueHelp="true"valueHelpRequest="openValueHelpUserGroup" 
valueHelpOnly="false" change="onSelectionChangeUserGroup"></Input>
       <Label class="sapUiSmallMarginTop" id="id_txt_ug_desc" text="Description"/>
								</layout:VerticalLayout>
								<layout:VerticalLayout class="sapUiSmallMargin">
									<Input id="id_vh_technical_platz" value="" type="Text" placeholder="{i18n>placeholder_technicalplatz}" showSuggestion="false"
										showValueHelp="true" valueHelpRequest="openValueHelpTechnicalPlatz" valueHelpOnly="false" change="onSelectionChangeTP"></Input>
									<Label class="sapUiSmallMarginTop" id="id_txt_tp_desc" text="Description"/>
								</layout:VerticalLayout>
								<layout:VerticalLayout class="sapUiSmallMargin">
									<ComboBox id="id_cb_type_selection" placeholder="{i18n>placeholder_type}" selectionChange="onComboBoxSelectionChange">
										<core:Item key="O" text="{i18n>cb_item_order}"/>
										<core:Item key="N" text="{i18n>cb_item_notification}"/>
									</ComboBox>
								</layout:VerticalLayout>
								<layout:VerticalLayout class="sapUiSmallMargin">
									<ComboBox id="id_cb_year_selection" items="{/}" placeholder="{i18n>placeholder_year}" selectionChange="onComboBoxSelectionChangeYear">
										<core:Item key="{}" text="{}"/>
									</ComboBox>
								</layout:VerticalLayout>
								<layout:VerticalLayout class="sapUiSmallMargin">
									<Button id="id_btn_search" icon="sap-icon://search" width="50px" press="onSearch" tooltip="{i18n>tooltip_search}"/>
								</layout:VerticalLayout>
							</layout:HorizontalLayout>

I tried with Form with Description, but it doesn't appear below . it appear next to input.

Please suggest me what kind of containers i need to use to make it responsive?

Thank you,

Regards,

JK.

[Joseph_BERTHE · Accepted solution]

Hello,

Why not using SmartFilter ? It does all what you want to do.

Regards,

Jospeh

[Jayakrishnan · Accepted solution]

No we are not using any smart controls. It is noraml OData Project

[Joseph_BERTHE · Accepted solution]

If you are using OData service, then you can use smart control, and then it will be much more easier to acheive what you want to do 😉

[maheshpalavalli · Accepted solution]

Hi Jayakrishnan Chandramohan,

like Joseph BERTHEsaid , you can use the smart filterbar or use a normal filter bar instead.

https://ui5.sap.com/#/entity/sap.ui.comp.filterbar.FilterBar/sample/sap.ui.comp.sample.filterbar.exa...

BR,
Mahesh

[Jayakrishnan · Accepted solution]

Thanks Mahesh and Joseph, I will try and let you know.

[Jayakrishnan · Accepted solution]

In Filter bar, how do i remove the three buttons at the top right corner.

Hide Filter Bar, Filters and Go. I dont need those button. Do you have any idea?

[Jayakrishnan · Accepted solution]

Is it neccessary that my OData Services need to be annotated to use SmartControls?

[Joseph_BERTHE · Accepted solution]

To hide Go button you have parameter : showGoButton that sjhoul be set to false. And look at all the properties starting by show.......

It sould answer your questions.

Regards,

Joseph

[elvin_baghele]

you can use sap.m.FlexBox instead of Horizontal layout

with FlexDirection = 'Row'

Or you can do like this,

First add this line in your xml view:
xmlns:html="http://www.w3.org/1999/xhtml"


<!-- code -->
<html:div class="sapUiResponsiveMargin">

<html:div style="float:left" class="sapUiSmallMargin">

<Input id="id_vh_user_group" value="" type="Text" placeholder="{i18n>placeholder_usergroup}" showSuggestion="false" showValueHelp="true"valueHelpRequest="openValueHelpUserGroup" 
valueHelpOnly="false" change="onSelectionChangeUserGroup"></Input><Label class="sapUiSmallMarginTop" id="id_txt_ug_desc" text="Description"/>

</html:div>

<html:div style="float:left"  class="sapUiSmallMargin"><Inputid="id_vh_technical_platz" value="" type="Text" placeholder="{i18n>placeholder_technicalplatz}" showSuggestion="false" showValueHelp="true" valueHelpRequest="openValueHelpTechnicalPlatz" valueHelpOnly="false" change="onSelectionChangeTP"></Input><Label class="sapUiSmallMarginTop" id="id_txt_tp_desc" text="Description"/>
</html:div>

<html:div style="float:left" class="sapUiSmallMargin"><ComboBox id="id_cb_type_selection" placeholder="{i18n>placeholder_type}" selectionChange="onComboBoxSelectionChange"><core:Item key="O" text="{i18n>cb_item_order}"/><core:Item key="N" text="{i18n>cb_item_notification}"/></ComboBox></html:div>

<html:div style="float:left" class="sapUiSmallMargin"><ComboBox id="id_cb_year_selection" items="{/}" placeholder="{i18n>placeholder_year}" selectionChange="onComboBoxSelectionChangeYear"><core:Item key="{}" text="{}"/></ComboBox>

</html:div>
<html:div style="float:left" class="sapUiSmallMargin"><Button id="id_btn_search" icon="sap-icon://search" width="50px" press="onSearch" tooltip="{i18n>tooltip_search}"/>

</html:div>

<html:div style="clear:both"> </html:div>
</html:div>

[Jayakrishnan]

Is it responsive?. I tried but not working 😞

[elvin_baghele]

I have updated the code above, try that one and let me know if you face any issues.

[Jayakrishnan]

Thank you for your help, i will update and let you know.

[elvin_baghele]

have you got the solution?

[Joseph_BERTHE]

It is not very standard 😉

Regards,

Joseph