Form Design with Description Issue?

[#1]

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_BERTHE1 · 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_BERTHE1 · 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_BERTHE1 · 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