Completing Activity Using The Custom Ribbon Button


Sometimes we have a requirement to change activity status using a custom button. Here we are going to discuss how we can complete an activity using WebAPI and action using a custom ribbon button placed on the subgrid.


We are going to complete an activity using a custom action and then we will be calling our custom action using WebAPI. We will add a button on the subgrid to call this WebAPI method, so let’s first design our custom action. We are going to create action from our solution but you can also created it by navigating to Process directly and can create custom action. Keep in mind when you will create a process outside of your solution, will be using the default prefix (new_) and in case you want to deploy this to another environment you have to add it to the solution, so it is better to create it in solution to make sure it will use your custom prefix and you can export it from there. So let’s start!
We are going to close the appointment activity.
Step 1
Navigate to Process -> New and select configure like below and click on Ok
Step 2
Next, we need to click on Add Step -> select Change Status and configure it like below.
Step 3
Activity your action and keep a note of the name of the action in our case it is him_CloseAppointmentActivity
Step 4
Create a web resource and use following code, here we are calling our custom action using WebAPI
  1. if (typeof (HIMBAP) == "undefined") {  
  2.     var HIMBAP = { __namespace: true };  
  3. }  
  5. HIMBAP.AppointmentJSLibrary =  
  6.     {     
  7.    CloseActivity:function(SelectedRecords,formContext)    
  8.     {  
  10.     for(let i=0; i<SelectedRecords.length; i++)  
  11.     {  
  13.     var parameters = {};  
  14.     var entity = {};  
  15. = SelectedRecords[i];  
  16.     entity.entityType = "appointment";  
  17.     parameters.entity = entity;  
  19.     var req  
  20.     = {  
  21.         entity: parameters.entity,  
  23.         getMetadata: function() {  
  24.             return {  
  25.                 boundParameter: "entity",  
  26.                 parameterTypes: {  
  27.                     "entity": {  
  28.                         "typeName""appointment",  
  29.                         "structuralProperty": 5  
  30.                     }  
  31.                 },  
  32.                 operationType: 0,  
  33.                 operationName: "him_CloseAppointmentActivity" //action name  
  34.             };  
  35.         }  
  36.     };  
  39.         function success(result) {  
  40.             if (result.ok) {  
  41.                    var gridContext = formContext.getControl("Appointments"); //name of the subgrid control  
  42.                    gridContext.refresh();  
  43.             }  
  44.         },  
  45.         function(error) {  
  46.             alert(error.message);  
  47.         }  
  48.     );  
  49.     }  
  50.     }  
  52. }  
In our code, we are calling our custom action and once we got the result we are refreshing the sub-grid to reflect changes.
Step 5
We can use this method in our ribbon command button. You can open this solution with the appointment entity and our javascript web resource using the Ribbon Workbench tool.
First, let’s add a command, as shown below:
Now add an enable rule to show only this button when at least one record is selected.
Step 6
Now we can refer this command into our command button which we need to add under the Subgrid section like below.
Once the above customization is done, publish your button changes and now, we can use our button to complete appointment activity, as shown below.


This is how we can add a button on the subgrid with the rule to the command button to make it available when only a single record is selected and use WebAPI to call a custom action.
Hope this will help someone!

Keep learning, keep sharing!!

We are expert in Microsoft Power Platform.