Author: singhramandeep

How to change the position of the Select All Checkbox in the Configuration Layout

If you are using a recommended item rule in configuration which is not mandatory, the user will see a select all checkbox just above the list of optionally selectable items in the mandatory item listing. Depending on how you have customized the Page Template for mandatory items, the select all checkbox can be hard to find on the right if there are too many columns displayed. You can add the below class definition to the Alternate CSS (All Product Families/Stylesheet) and map it to the configuration flow.

div.select-all-wrapper{
 height: 18px;
 line-height: 18px;
 margin-top: -9px;
 position: absolute;
 right: 280px;
 top: 50%;
}

Adding this class definition to the alternate stylesheet ensures that it takes precedence over the standard class definition. You can change the properties of this class definition (like changing left position to move the select all towards the left or right) and get the desired UI behaviour

 

 

Advertisements

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;