Category: Uncategorized

How to create a HTML button which calls a commerce action?

In a lot of scenarios, you might require to show/hide commerce actions dynamically on the same step. At times you might require to call different html actions on a click of a button.  Standard CPQ functionality does not help you attain such functionality but you can creatively leverage custom HTML to attain this.

Given below is a basic bml code which will dynamically render the html button and generate the javascript code which will click on  the commerce action on the click of a button. You can put custom logic in the snippet to enhance it for other requirement like hiding the button dynamically at runtime. This code should be placed in the default of the html attribute.

actionId = "2014073819"; //action id of 'Submit Term Exception Approval' ie initiateTermExceptionApproval
docId="4133603";
htmlLabel="Validate for discount approval";
htmlString = "";
htmlString = htmlString+"$(document).ready(function(){$('.tE').click(function(){javascript:setDocFormIds("+docId+", 1, "+actionId+");javascript:bmSubmitForm('/commerce/buyside/document.jsp', document.bmDocForm, bmValidateForm, 'performAction', false);});});";
htmlString = htmlString+"<input type='button' id='tE' class='tE' value='"+htmlLabel+"'></button>";
return htmlString;

 

The function setDocFormIds(document_id, document_number, action_Id )  is available in the bigmachines javascript framework. it lets you set the ID’s of the commerce action which can then be called using the bmSubmitForm()  function. You can find the document ID and the action id through the admin role.

To make the above code environment portable, we should ideally move the id’s to a data table. Below snippet illustrates how that can be achieved.

htmlString = "";
htmlLabel="Validate for discount approval";
envName=_system_company_name;
envParam = bmql("select ActionId, DocId,HTMLLabel from EnvironmentParam where EnvName=$envName and Action = 'initiateTermExceptionApproval' and isActive='Y'"); 

for env in envParam
     { 
                  actionId = get(env,"ActionId");  
                  docId = get(env,"DocId"); 
                  htmlLabel = get(env,"HTMLLabel");
      }
htmlString = htmlString+"$(document).ready(function(){$('.tE').click(function(){javascript:setDocFormIds("+docId+", 1, "+actionId+");javascript:bmSubmitForm('/commerce/buyside/document.jsp', document.bmDocForm, bmValidateForm, 'performAction', false);});});";
htmlString = htmlString+"<input type='button' id='tE' class='tE' value='"+htmlLabel+"'></button>";
return htmlString;