Skip to Content
0

Fiori: Selection screen for Master/Detail view

Jan 12, 2017 at 07:36 AM

311

avatar image

Hi,

I am using Master/Detail page in Fiori and I would like to have a selection screen before the master is filled with let's say Sales Orders. So that user will see only selected Orders in the master screen and then can select to see the details. What would be the best way to do that?

Thanks in advance!

Tim

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Masayuki Sekihara
Jan 12, 2017 at 08:02 AM
0

Hi Tim,

How about using Fiori Elements? Selection filter is available.

https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements

If it is fixed selection filter, you can use oData $filter option.

Regards,

Masa / SAP Technology RIG

Show 6 Share
10 |10000 characters needed characters left characters exceeded

Hi,

thank you for your comment. I have thought about that also, it is a very good alternative. Anyways, could you (or someone else) share some ideas on how to implement a selection screen for the master/detail page? I am asking this, because the customer is keen on the master/detail screen rather than on using the Fiori Elements which you suggested.

Thanks,

Tim

0

Hi Tim,

The Master Detail is just a template and you can extend it based on customer requirements.

Before you start coding, you need to design the UI. Having a design thinking workshop with customer is the best way.

BUILD helps designing UI mockup. https://www.build.me/splashapp/

SAP Fiori design guideline is also a good reference. https://experience.sap.com/fiori-design-web/

Please share your UI mockup design.

If you are asking us to do some UI mockup design, please share the details for the business use case, personas, tasks, and selection fields.

Regards,

Masa / SAP Technology RIG

1

Hi Masa,

thank you very much for your comment. I have used the Build tool for the mockup based on the customers input. So, as I said the preferred option from the customer is the master-detail approach.

As I wrote in my comment below, I would need to find an example how to use the data from the selection screen to get the data from the backend. Any ideas?

Thanks,

Tim

0

Hi Tim,

Please share your UI mockup for the selection screen. Is it a part of master detail screen or completely separate screen?

Regards,

Masa / SAP Technology RIG

0

Hi,

it is in the master1 screen, so no separate screen. So when the user fills in search fields and presses the search button, I need to bind the contents of the fields to use them in getting the data accordingly. Any example I would appreciate.

Thanks,

Tim

XML view looks like this:

<SearchField id="master1SearchSoldTo" showRefreshButton="{device>/isNoTouch}"   placeholder="{i18n>master1SoldToPlaceholder}" search="onSearchSoldTo"
 tooltip="{i18n>master1SearchTooltip}" showSuggestion="true" 
 suggest="handleSuggest"  width="100%"></SearchField>
<SearchField id="master1SearchOrderNo" showRefreshButton="{device>/isNoTouch}" 
  placeholder="{i18n>master1OrderNoPlaceholder}" search="onSearchOrderNo"
  tooltip="{i18n>master1SearchTooltip}" width="100%"></SearchField>
<SearchField id="master1SearchCustomerPO" showRefreshButton="{device>/isNoTouch}" 
placeholder="{i18n>master1CustomerPoPlaceholder}" search="onSearchCustomerPo"
tooltip="{i18n>master1SearchTooltip}" width="100%"></SearchField> 
<DatePicker width="100%" id="__CreatedOnFrom" 
placeholder="{i18n>master1CreateDateFromPlaceholder}"/>
<DatePicker width="100%" id="__CreatedOnTo" 
placeholder="{i18n>master1CreateDateToPlaceholder}"/>
<Toolbar>
<ToolbarSpacer/>
	<Button type="Default" text="Search" press="showDetail" />
<ToolbarSpacer/>
</Toolbar> -->
0
0
A K Jan 12, 2017 at 11:02 AM
0

Better to create Master-1 to entering the SO---> GoTo master 2 to display the SO ---> On click of SO from Master2 ---> Show detail screen

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi,

yes, that is my preferred option as well, so using master1 as selection screen -> to master2 display the Order header and then show the details. Can you point to an example how the selection screen works and how I can get the data from the selection fields to select data in the backend?

Thanks,

Tim

0
Mahesh Chandra VVNS Jan 17, 2017 at 04:54 PM
0

Hi Tim,

You can use this sample in UI5 Explorer to create this scenario: -

https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.SplitApp/preview

Master 1- Selection Screen then to Master 2 to display and Detail to show the detials.

Thanks,

Mahesh

Share
10 |10000 characters needed characters left characters exceeded