How to make a UI flexible/dynamic using UI Switch in SDK/PDI/Cloud ApplicationStudio
Background of UI Switch and Business Roles
You have to understand the UI Switch association with Business roles for this topic. UI switch can be assigned to a section group on UI to control the properties (ReadOnly, Visible, Mandatory etc) of the attributes in the section. This UI switch is then assigned to Business role which in turn is assigned to a user in Business ByDesign system. Hence the dynamic properties on UI are applicable for the user who has been assigned with business role containing the UI switch. UI switch should be created in SDK or Cloud Application Studio.
Example: Hide “Employee Responsible” field on Purchase order OIF for a user
User PGREENE sees the Purchase Order OIF screen as shown in screen below. The Buyer responsible field is visible to him and in this exercise we will hide this field whenever the screen is loaded for PGREENE. The same way (as mentioned in the steps below) you can modify properties of other fields the same way.
1. Create a solution in SDK and add an extension Business object for Purchase Order
2. Create a UI Switch.
3. Right click on the .xbo file in the solution and select “Enhance screen”. Select the purchase order OIF screen in the following pop-up screen. This will create a .xuicomponent file in the solution
4. Open the .xuicomponent file in UI designer by double clicking on it.. Select the section group where the field is located. Section group should have a stable anchor for the dynamic properties to support. Go to Extensibility explorer and select the action “Adjust Properties”. In the pop up you will see all fields of section group and set the Visible property of Buyer Responsible field to Bound. Assign a UI switch that was created in solution.
5. Save and activate the UI component. Save and activate the solution.
6. For testing the dynamic UI feature login to Business ByDesign portal, assign the UI switch to a Business Role that is assigned to PGREENE. Go to Application and User Management WoC->Business users->Edit Access Rights-> Business Role Assignment. Click on a business role and navigate to Business Role OIF screen. Navigate to tab UI Switches. Click Add Row and select the UI switch from value selector that we created in step 2.
7. Log off and login into business byDesign as PGREENE and open the purchase order OIF screen and you can see that the Buyer responsible field is not visible for him. But if you login as a user who is not assigned the above said UI switch then he/she shall be able to see the buyer responsible field on UI.
Hope this is useful to making dynamic UIs. Please note that this can be done only on SAP standard UIs and not on Custom UIs developed by partners. In custom UI only personalisation and adapation are supported if you define stable anchors for the section groups.
Hi Babu Lal Limba,
Nice Document..
Thanks for sharing..
Regards,
Siraj.
Hi Babu,
Lovely blog, thanks. I have a query, would be nice if you could help with this.
As per your screenshots, you are hiding the mandatory field "Buyer Responsible" but you change the visibility property to false and change the read only property to Bound. How does this make the field non-mandatory? Also, to which field do you bind this to?
Best Regards,
Preethi Santhanam
Hi Preethi
I am not trying to field non-mandatory here. it is just an example how can you set the properties dynamically. Here I am setting the Buyer Responsible field Visible proeprty to Bound. And I have assigned a UI switch. It means the Visible property is bound to a UI switch. The business user who is assigned to this UI switch will be able to see this field and oher dont see it.
Thanks Babu, makes sense 🙂
can we hide a tab with this form?
Hi Ahmed,
Though I am not much into PDI now, I seems that the xbo is not active yet.
You can try to activate the content of your add-on and try again
Regards
Babu
i'm pretty sure i activated it many times.
Hi Babu,
Greetings!
Great blog. However, I am stuck at the same step as Ahmed. Any input here is greatly appreciated.
Hi Ahmed,
Greetings to you too!
Were you able to overcome this issue?
Thanks & Regards,
Koushik
Hi Koushik,
yes i figured it out, all you have to do is forget about that order and do this: Select the section group -> adjust properties -> choose the ui switch -> change any property(like visible or invisible .. forget about bound property) -> save and activate.
then do the rest as the blog, create a business role and give it the ui switch and assign that business role to a user.
Regards,
Ahmed
Hi,
in Addition to this:
For example you need to make Tab visible for a specific role:
In the Adjust Property you need to make two configurations:
In this case all user with this role will see this tab and all other user will not see the tab.
This Tutorial is not up to date but with the comments it should now possible for every one.