Skip to Content
Author's profile photo Babu Lal Limba

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.

/wp-content/uploads/2015/12/pp1_847615.png

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.

/wp-content/uploads/2015/12/pp2_847637.png

1. Create a solution in SDK and add an extension Business object for Purchase Order 

/wp-content/uploads/2015/12/pp3_847638.png

/wp-content/uploads/2015/12/pp4_847639.png

2. Create a UI Switch.

/wp-content/uploads/2015/12/pp5_847640.png

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

/wp-content/uploads/2015/12/pp6_847641.png

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.

Pic.jpg

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.

/wp-content/uploads/2015/12/pp8_847643.jpg/wp-content/uploads/2015/12/pp9_847644.png

/wp-content/uploads/2015/12/pp10_847645.png

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.

/wp-content/uploads/2015/12/pp11_847647.jpg

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.

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo MOHD SIRAJUDDIN
      MOHD SIRAJUDDIN

      Hi Babu Lal Limba,

      Nice Document..

      Thanks for sharing..

      Regards,

      Siraj.

      Author's profile photo Preethi Santhanam
      Preethi Santhanam

      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

      Author's profile photo Babu Lal Limba
      Babu Lal Limba

      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.

      Author's profile photo Preethi Santhanam
      Preethi Santhanam

      Thanks Babu, makes sense 🙂

      Author's profile photo Mario Banos
      Mario Banos

      can we hide a tab with this form?

      Author's profile photo Ahmed Elgammal
      Ahmed Elgammal

      hi, when i choose the property "Bound" this window appears !!! why ?

      Author's profile photo Babu Lal Limba
      Babu Lal Limba
      Blog Post Author

      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

      Author's profile photo Ahmed Elgammal
      Ahmed Elgammal

      i'm pretty sure i activated it many times.

      Author's profile photo Koushik Reddy Goguladinne
      Koushik Reddy Goguladinne

      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

      Author's profile photo Ahmed Elgammal
      Ahmed Elgammal

      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