1. Open Ribbon WorkBench
2. Select Solution contains entity and components
3. Add button, Add command
4. Now add Javascript Action and select Javascript and Function
5. Now Click on Add Parameter
6. Add CRM Parameter

   

7. and select Primary  Control

   

1 thing to remember, like for Form Button , always use PrimaryControl as Form Control

function readXML(executionContext) {   
 if (executionContext !== null) {

             formContext =  executionContext;  //PrimaryControl
   }
alert("executionContext  is null ");
}

SVG – Scalable Vector Graphics is most suitable for the Responsive page as it can be scaled high and keeping almost same Quality and that is the Reason these images suit the New UCI Responsive page. 

Below are some advantage for Using SVG

• SVG images can be created and edited with any text editor
• SVG images can be searched, indexed, scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable
• SVG graphics do NOT lose any quality if they are zoomed or resized
• SVG is an open standard
• SVG files are pure XML

What are the changes we need to do

1. No change required for OOB system buttons when Transition happens it automatic updates
2. For Custom Button and Icon we need to Add SVG image in MorderImage Property from Ribbon workBench and we can keep Image 16 and image 32 if you want but it recommended we change them too.

So now we have 3 Properties control

1. Image 16 for 16*16 png or jpg image and used in classic Legacy WebClient
2. Image 32 for 32*32 png or jpg image and used in Classic Legacy WebClient
3. ModernImage SVG format independent of Resolution used in New UCI

Below are the steps to add SVG image in Modern Image

1. Create a New Web Resource with type as Vector Format (SVG) and Upload image

   

2. Now Open Ribbon WorkBench, If not installed install it from here
3. If button properties are disabled. right-click a select Customise button

   

4. Publish the Ribbon and we can now see the correct image in our Button at UCI.

We only faced below issue in 1 particular Custom Form and that provided us ideas what we wanted to test / Validate and correct while we were doing transition Validation for New UCI in DEV

We found below 3 gaps which needed validation

1. Ribbon Button not showing in New UCI but visible in WebClient Legacy App
2. OOB Button visible in Legacy App but hidden or not showing up in New UCI ( there is 1 Display Rule: mscrm.hideonmorden)
3. Ribbon Button not working (RibbonAction.js has been deprecated)

So there are 2 things here: Any OOB Button on the entity is not visible on Form example: Other Activity  in Contact (Refer below screenshot)
OR
Any Custom Button on the entity is not visible, For custom button, we faced only in 1 form and that too was resolved opening Ribbon workbench and publishing it without any change

• FOR  OOB Button on the entity is not visible on Form example: Other Activity  in Contact (Refer below screenshot), we can follow below to enable but remember its not a recommended method and not mandatory that it will work.

There are many OOB Button that is disabled at UCI on purpose. So we can enable them only if required but I am not sure if that supported.

Click Here to check Post: How to add Button using Ribbon Work Bench

• Creating a new Solution with the entity (contact)
• Install Ribbon Workbench Solution and Open from Top Left Corner
• Select the Solution Created Previously with Entity

• Once Loaded, You can see all Hidden / Visible Buttons available on HOME , SUBGRID and FORM , We will select our Button “Other Activity”

• Right-click on Button and click on Customization Command

• In Display Rule, we will find a rule “mscrm.HideOnModern”, Deleting this will unhide this button on UCI,

• BUT THIS DOESN’T MEAN IT WILL WORK THE SAME WAY IT WAS WORKING IN LEGACY WEB CLIENT APP

If your button not working most probably you are using RibbonAction or Ribbon Workflow

• If you followed my old blog how to Trigger workflow or action from Ribbon Button and you are using this onto your ribbon button. so bad news is it has been Deprecated, below screenshot from ribbon workbench, you can go through it to remove it from Button

https://ribbonworkbench.uservoice.com/knowledgebase/articles/132235-create-a-workflow-short-cut-ribbon-button-no-code

• We can use JS to execute the same or I would recommend following this post: Execute Microsoft Power Automate from Ribbon using JavaScript – On-demand  Power automate flow using Javascript