Skip to Content
Author's profile photo DALJEET SINGH KOHLI
DALJEET SINGH KOHLI
June 14, 2016 Less than a 1 minute read

Dynamic Background color/Icon change depending upon value!!

HOW TO CHANGE ICONS FOR A FIELD DYNAMICALLY.

—————————————————————————————-

Requirement : We had a field called status , Depending on the field we need to change the Icon in another column:

SDK Development:

1). Make an element type text:Consider Point number 1 in screen attached.

Dynamic Icons._01_02.PNG

Dynamic Icons._02.01.PNG

2).Open the EC of your development and do the following :Consider Point number 2 in screen attached.

3). Let the Property for default icon be blank.(Or if you need something for your reference when you don’t assign any value make it “Default”)


Dynamic Icons._03_04.PNG

4).Make the ABSL code changes and pass dynamically the values in


5). Outcome.

DALJEET SINGH KOHLI

SAP CLOUD FOR CUSTOMER

HCL AXON CONSULTING

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rudhra Udayakumar
      Rudhra Udayakumar

      Dear DALJEET ,

      I tired the same but unable to see the image at last

      Added my steps in the attachment.

      Regards

      Rudhra

      Author's profile photo DALJEET SINGH KOHLI
      DALJEET SINGH KOHLI
      Blog Post Author

      Hi ,

      Can you show me the Binding done on UI?

      Br'

      Daljeet

      Author's profile photo Ludger Buenger
      Ludger Buenger

      Hi Daljeet,

      Thanks for the good icon How-To.

      Just a little addition from my side:

      If the use case is simple, one does not need Absl-Coding. It is also possible to use Icon Mapping solely in the UI Designer as an alternative.

      To do so, do as follows:

      • Bind the value of the icon not to the field containing the icon name but the field where the icon name shall be determined from (in the example above this is the status.content field)
      • In the UI-Designer, in the icon-control properties, open the Icon-Mapping collection (just above the value binding).
      • In the dialog that opens, map different status values to the desired icon to represent the status
      • Do not forget to set a default icon in case the status is empty or contains a value for which no mapping is present.

      This eliminates the need to add a separate icon field and code performing the mapping in the AfterModify or AfterLoading event.

      However your approach is more flexible if the computation which icon to use should be more complex.

      Using AfterLoading, your approach is able to solve scenarios where you like to visualise priorities based on time passed (e.g. tickets approaching or exceeding certain time thresholds).

      Thus both approaches are valid and feasible.

      Best regards,

      Ludger

      Author's profile photo Mousa Alramadhan
      Mousa Alramadhan

      Ludger Buenger
      Can we use this for standard BOs? namely SRM_MultiStepApprovalReuse_EC.EC.uicomponent? I am trying to change the approval icons here.

      Thanks.