{"id":4061,"date":"2021-01-31T18:26:38","date_gmt":"2021-01-31T18:26:38","guid":{"rendered":"https:\/\/himbap.com\/blog\/?p=4061"},"modified":"2021-01-31T18:26:38","modified_gmt":"2021-01-31T18:26:38","slug":"completing-activity-using-custom-ribbon-button","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=4061","title":{"rendered":"Completing Activity using Custom Ribbon Button"},"content":{"rendered":"<p><strong>Requirement<\/strong><br \/>\nSometimes we have requirement to change activity status using custom button. Here we are going to discuss how we can complete activity using WebAPI and action using a custom ribbon button placed on the subgrid.<\/p>\n<p><strong>Solution<\/strong><br \/>\nWe are going to complete activity using 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&#8217;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 process out side of your solution will be using default prefix (new_) and in case you want to deploy this to another environment you have to add it in 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&#8217;s start!<\/p>\n<p>We are going to close appointment activity.<br \/>\n<strong>Step 1<\/strong> Navigate to Process -&gt; New and select configure like below and click on Ok<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/customaction.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4064 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/customaction-300x160.png\" alt=\"customaction\" width=\"300\" height=\"160\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/customaction-300x160.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/customaction-624x333.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/customaction.png 774w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 2<\/strong> Next we need to click on Add Step -&gt; select Change Status and configure it like below<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/completappointment.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4065 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/completappointment-300x163.png\" alt=\"completappointment\" width=\"300\" height=\"163\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/completappointment-300x163.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/completappointment-624x339.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/completappointment.png 759w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 3<\/strong> Activity your action and keep note of name of the action in our case it is <strong>him_CloseAppointmentActivity<\/strong><\/p>\n<p><strong>Step 4<\/strong> Create a web resource and use following code, here we are calling our custom action using WebaPI<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (typeof (HIMBAP) == &quot;undefined&quot;) {\r\n    var HIMBAP = { __namespace: true };\r\n}\r\n\r\nHIMBAP.AppointmentJSLibrary =\r\n    {\t\r\n   CloseActivity:function(SelectedRecords,formContext)  \r\n    {\r\n\r\n    for(let i=0; i&lt;SelectedRecords.length; i++)\r\n    {\r\n        \r\n    var parameters = {};\r\n    var entity = {};\r\n    entity.id = SelectedRecords[i];\r\n    entity.entityType = &quot;appointment&quot;;\r\n    parameters.entity = entity;\r\n\r\n    var req\r\n    = {\r\n        entity: parameters.entity,\r\n\r\n        getMetadata: function() {\r\n            return {\r\n                boundParameter: &quot;entity&quot;,\r\n                parameterTypes: {\r\n                    &quot;entity&quot;: {\r\n                        &quot;typeName&quot;: &quot;appointment&quot;,\r\n                        &quot;structuralProperty&quot;: 5\r\n                    }\r\n                },\r\n                operationType: 0,\r\n                operationName: &quot;him_CloseAppointmentActivity&quot; \/\/action name\r\n            };\r\n        }\r\n    };\r\n\r\n    Xrm.WebApi.online.execute(req).then(\r\n        function success(result) {\r\n            if (result.ok) {\r\n                   var gridContext = formContext.getControl(&quot;Appointments&quot;); \/\/name of the subgrid control\r\n                   gridContext.refresh();\r\n            }\r\n        },\r\n        function(error) {\r\n            alert(error.message);\r\n        }\r\n    );\r\n    }\r\n    }\r\n\r\n}\r\n<\/pre>\n<p>In our code we are calling our custom action and once we got result we are refreshing sub grid to reflect changes.<\/p>\n<p><strong>Step 5<\/strong> We can use this method in our ribbon command button. You can open this solution with appointment entity and our java script web resource using Ribbon Workbench tool. First let&#8217;s add a command like below<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/command.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4066 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/command-300x103.png\" alt=\"command\" width=\"300\" height=\"103\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/command-300x103.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/command-1024x351.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/command-624x214.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/command.png 1722w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nAnd now add enable rule to show only this button when at least one record is selected.<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/enablerule.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4071 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/enablerule-300x85.png\" alt=\"enablerule\" width=\"300\" height=\"85\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/enablerule-300x85.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/enablerule-1024x291.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/enablerule-624x177.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/enablerule.png 1653w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 6<\/strong> Now we can refer this command into our command button which we need to add under Sub grid section like below<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/commandbutton.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4067 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/commandbutton-300x118.png\" alt=\"commandbutton\" width=\"300\" height=\"118\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/commandbutton-300x118.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/commandbutton-1024x402.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/commandbutton-624x245.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/commandbutton.png 1798w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Once above customization is done, publish your button changes and noww we can use our button to complete appointment activity like below.<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/complete-button.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4068 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/complete-button-300x128.png\" alt=\"complete button\" width=\"300\" height=\"128\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/complete-button-300x128.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/complete-button-1024x437.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/complete-button-624x266.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/01\/complete-button.png 1216w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Summary<\/strong><br \/>\nThis is how we can add button on the sub grid with rule to the command button to make it available when only single record is selected and use WebAPI to call custom action.<\/p>\n<p>Hope it will help someone!<br \/>\n<strong>Keep learning, Keep sharing !!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Requirement Sometimes we have requirement to change activity status using custom button. Here we are going to discuss how we can complete activity using WebAPI and action using a custom ribbon button placed on the subgrid. Solution We are going to complete activity using custom action and then we will be calling our custom action using WebAPI. We will add&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=4061\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,402,522],"tags":[849,659,850,851,848],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4061"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4061"}],"version-history":[{"count":6,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4061\/revisions"}],"predecessor-version":[{"id":4073,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4061\/revisions\/4073"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}