How to enable Custom screens in Responsive UI & Extended App
When switching from HTML5 (UX3) to Responsive UI (RUI), you might notice that some custom UI built using SAP Cloud application studio (also known as PDI/SDK) are not visible.
In this blog, I will explain steps to enable custom screens in RUI. Also highlight some of the limitations (as of 1702 release) for rendering the custom screens in the Responsive UI.
Create New screens: During creation of custom screens for custom business object, in the ‘Create New Screens’ pop up, under ‘Supported Devices’, select the appropriate option. The default option is ‘Desktop Only’.
For the screens to be displayed in Responsive UI, select the option as ‘Desktop and Tablet’ as shown below. This selection value can be changed later if required in the Property Explorer of the UI Designer.
For existing screens: To enable your existing screens to work for Responsive UI, follow the below steps.
Open your workcenter view in UI Designer and in the Properties window locate Configuration->Tags-> select the popup and add two entries:
1) Device: Desktop
2) Device: Tablet
The entry Device = ‘Tablet’ will make sure that the workcenter, views are rendered in Responsive UI.
Limitation of Responsive UI (as of 1702)
While most of the Controls that you use in SAP Cloud application studio will work in Responsive UI across Smartphone, Tablet, Desktop. There are some Floorplans & Controls which will not. In case you are using them, the recommendation is to switch to a supported floorplan.
Floor plans: The floor plans Quick Activity Floor plan (QAF), Object Instance Floorplan (OIF) and Fact Sheet (FS) are not supported yet in Responsive UI.
For Responsive UI, the recommendation is to use Thing based navigation floor plans – Object Work list, Quick create, Quick view, Thing Inspector, Thing Type etc.
At later releases even when the QAF, OIF and FS floorplans are planned to be supported for Responsive UI, it shall be available/supported only for the Desktop/Laptop access and not for tablet and smartphone.
Panes & Controls:Following are the not so commonly used Panes & controls which are not supported currently for the Responsive UI.
Panes of Type Browse and Collect, Hierarchy Graph, SideCarPannel, GanttChart, NetworkChart, NestedLayout, GridLayoutSnippet, GroupCalendarPane.
Controls of type LineSeparator, ProgressBarControl, MediaPlayerControl, RatingControl, Legend Control.
The Object value selector can be used as a possible alternate to the Browse and collect. Also the Hierarchy table can be used for the Hierarchy graph.
Hence while designing your screens for the Responsive UI, make sure that you consider the limitations described here.