2858436 - How to Perform UI Adaptations on Fiori

This article is to provide help on how to perform basic UI adaptations on Fiori using the new Adapt Mode.

Topics covered:

• Navigation
• How to add a tab.
• How to add a section, mashup, explanation, embedded report.
• How to add a rule.
• How to add a validation.
• How to assign a rule to a property.
• How to unassign a rule from a property.

"Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental."

SAP Cloud for Customer

Starting from release 1911 the HTML UI client is not available anymore and the Fiori UI is the default client for all users including Key User. Fiori Adapt mode introduce a new way to perform screen adaptation and personalization.

• Navigation
  
  
• Navigate in the side panel by selecting parent element or drill down to a child element.

• Directly select elements by clicking a blue edit icon in the main view or by right mouse click on an element.

  
  
  
  
• How to add a tab

• Click blue edit icon above the tabs of the UI.

• Click “Add” and “Tab” in the adaptation side panel.
  
  
  
  
  

• How to add a section, mashup, explanation, embedded report
  
  
• Select any element in the view area (e.g. the “Products” list)
  
  
  
  

• Select parent element in the adaptation side panel until you reach the “View” element.

• Click “Add” and e.g. “Section” in the adaptation side panel.
  
  
  
  

• How to add a rule
• Select any element in the main screen and then select the parent element until you reach the “UI Component” element (topmost element).
• From there drill down to “Implementation” and “Rules and Validations”.
  
  
  
  
• How to add a validation
• Same steps as adding a rule.
• But before a validation can be added a rule needs to be created (or at least one rule needs to exist already).
  
  
• How to assign a rule to a property
• Right click the “Value” element of the field for which the rule shall be used.
• Click the “Rule” link of the property to change.
• Select one of the existing rules and hit “Apply” button.
  
  
  
  
  
  
• How to unassign a rule from a property
  
  
• Right click the “Value” element of the field and then the “(x)” icon next to the rule.
  
  
  
  

Related and Additional KBA's:

• 2844045 - How To Add New Section in Fiori Adaptation Mode
• 2810653 - Disable Key User Properties Not Available In Fiori
• 2821283 - Change of Field Label in Fiori Adaptation
• 2832275 - Fiori Adaptation: How to Drag and Drop Fields between Sections
• 2858386 - Copy of Section Not Availalbe in Fiori Adapt Mode

Fiori Adapt ; adaptation; UI ; RUI ;  , KBA , how to do adaptations , adaptation , rui adaptation , fiori adaptation , start adaptation , adaptions in fiori , AP-RC-UIF-FLX-FRW , UI Adaptation Framework , How To

SAP Cloud for Customer add-ins all versions ; SAP Cloud for Customer core applications all versions