Legacy platform

Customizing the add products screen

You can customize the add products screen to add a custom field, and populate the values to order line.

Procedure

  1. Log on to Sterling™ Call Center. The Home page opens.
  2. Open the Create Order screen in any of the following ways:
    • On the Home page, in the Order panel click Create Order.
    • From Related Tasks, click Create Order.
  3. In the Customer Search screen, enter the appropriate search criteria and click Search. The search results are displayed.
  4. Click Next. The Add Products screen opens.
  5. In the Product ID field, enter the product identifier.
  6. From the application header, click the Development Tools icon Customize the selected screen, and select Customize from the list. Hover over the Add Products screen and right-click to select the screen.
    Alternatively, you can select Customize from Outline from the application header. The Select Screen to Extend window opens. From the tree, select AddItemsLines and click Extend Screen.
    Note:
    • If you cannot customize the selected screen, an appropriate message is displayed.
    • If multiple instances of the same screen are found, by default, the first instance of the screen is selected for customization.
  7. By default, the Layout tab is selected. From the Widget Palette panel, select and drag the Filtering Select widget to the Screen Outline panel and place the widget in the appropriate position. The Basic Properties window opens.
  8. In the Unique identifier field, select extn_filteringselect from the list.
  9. In Field label, click Select field label for the text widget. The Field label window opens.
  10. Click Add bundle entry for the text widget. The Add Bundle Entry window opens.
  11. In the Bundle Text field, enter Department.
  12. In the Bundle key field, extn_Department bundle key is populated.
  13. Click Ok.
  14. Click Select with Colon. The Basic Properties window opens.
  15. Click Apply. The Filtering Select: extn_filteringselect panel opens to the right.
  16. Click the Binding tab and expand Source.
  17. In the Namespace field, select OrderLine from the list.
  18. In the Path field, enter DepartmentCode.
  19. Expand Target, and in the Namespace field, select getCompleteOrderLineList_input from the list.
  20. In the Path field, enter DepartmentCode.
  21. Expand Option, and click Add option binding details for the widget.
  22. In the Namespace field, select extn_getDataList from the list. Otherwise, click the Add icon Add namespace to add the namespace. After adding the namespace, click Ok.
  23. In the Path field, enter DepartmentCode.
  24. In Screen Outline, select Filtering Select:extn_deptCode. The filtering select details are displayed.
  25. Click the Events tab, and select OnChange event.
  26. Click the Add icon Add subscriber for the onChange event.
  27. In the Method field, enter onDeptCodeChange.
  28. Click Ok.
  29. Click the screen level Events tab.
  30. Add the local afterScreenInit event by clicking the Add icon Add subscriber for the afterScreenInit event.
  31. In the Method field, enter the callExtnAPIs method.
  32. Click Ok.
  33. Click the Data tab, and click Mashup Calls.
  34. Expand Behavior Mashup, and click the Add icon Add mashup reference ID and mashup ID.
  35. In the Mashup Reference ID field, enter extn_getOrderTypesCommonCodesList.
  36. Against Mashup ID, click the Edit icon Edit the custom mashup identifier. The Editing a Custom Mashup, complete editing allowed screen is displayed.
  37. From the API Name list, select getCommonCodeList.
  38. Click the Input tab, if necessary. By default, this tab is selected.
  39. In the API Input panel, expand Input > CommonCode.
  40. Select CallingOrganizationCode and CodeType attributes, and place it in the appropriate position in the Input Template panel.
  41. Click the Output tab.
  42. In the API Output panel, expand Output > CommonCodeList > CommonCode.
  43. Select CodeValue and CodeShortDescription attributes, and place it in the appropriate position in the Output Template panel.
  44. Click the screen level Events tab.
  45. Add the local onExtnMashupCompletion event by clicking the Add icon Add subscriber for the onExtnMashupCompletion event.
  46. In the Method field, enter the handleOnExtnMashupCompletion method.
  47. Click Apply.
  48. Click Save.
  49. Click Close.

What to do next

  • Add the following code in the extensions/isccs/webpages/order/create/additems/AddItemsLinesExtn.js file.
    callExtnAPIs : function(){
		  var CommonCode={};	
		 _isccsUIUtils.callApi(
            this, CommonCode, "extn_getOrderTypesCommonCodeList", null);
	},
onExtnMashUpCompletion : function(bEvent,uiEvent,ctrl,args){
			if(args == null || args.hasError){
        	// handle error. 
        	// args.errorData will contain error related information
        }  
        else{

			var mashupArray=args.mashupArray;
			var len=mashupArray.length;
			for(var i=0;i<len;i++){
				var currentReference=mashupArray[i];
				var mashupRefId =currentReference.mashupRefId;
				if(_scBaseUtils.equals(mashupRefId, "extn_getOrderTypesCommonCodeList"))
				{
        			var modelOutput =currentReference.mashupRefOutput;	
        			_scScreenUtils.setModel(this, "extn_getOrderTypesCommonCodeList", modelOutput, null);
					break;
        		}
			}

			}
		}, 
		onDeptCodeChange : function(){

			var targetModel = null;
             var deptCode=null;       
			 var modelObj=null;
                targetModel = _scScreenUtils.getTargetModel(
                this, "getCompleteOrderLineList_input", null);
                deptCode = dLang.getObject("DepartmentCode", false,targetModel);

                    modelObj = _scScreenUtils.getModel(this, "OrderLine");

                    dLang.setObject("DepartmentCode", deptCode, modelObj);

                    this.fireEventToUpdateGridColumn(this,targetModel);
                    this.updateChangesInOrderLine(modelObj);
		}
  • Import the appropriate utilities in scDefine.
  • In the additionalmashups.xml file present in the isccs\webpages\mashupxmls folder, add the following values:
    • CallingOrganizationCode="xml:scControllerInput:/Order/@EnterpriseKey"
    • CodeType="ORDER_TYPE"
      Note: Here, the ORDER_TYPE value set for the CodeType attribute is used as an example.
  • Restart your server, and open the screen to view the changes.