Versions Compared

Version Old Version 7 New Version Current
Changes made by

Lakshminarayanan1 S CTOO

Lakshminarayanan1 S CTOO

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Screen ItemWhat to provide
Template IDProvide a unique ID for the Template. For example, SAMPLE_TEMPLATE.
Template DescriptionSmall description about the Template. For example, SAMPLE TEMPLATE.
Channel Id

Indicates for which channel the template is applicable for. The options available are:

Do you wish to configure a common template for all channels?

Yes: This template is applicable to all the following channels.

  • Desktop
  • Mobile
  • Tablet

No: Appropriate channel must be selected for the template. 

Info

Channel can be selected for each Template Config within the same Template ID.


Template Config

You have to specify the relevant HTML DOM (codes) with the swipe button background attributes for enabling the swipe button in the template. The following code snippet serves as a sample reference: 

Example for HTML DOM:

Code Block
languagexml
<div id="SAMPLEFORM-ITEMID-swipebtn-background" class="button-background ">
	<span id="SAMPLEFORM-ITEMID-swipebtn-slide-text" class="slide-text">Check Swipe Template</span>
	<div id="SAMPLEFORM-ITEMID-swipebtn-slider" class="slider" data-item-id="ITEMID" data-button-id="SAMPLEFORM">
		<i id="locker" class="material-icons fas fa-lock"></i>
	</div>
</div>


Need to be loaded on Startup?

Indicates the rendering of the template in the initial instance. 

Click Yes for the template to get rendered on accessing the template widget in the end application. 

On selecting No, the template will not get rendered on accessing the template widget in the end application. 

SubmitSubmit the configuration of the template.

...

Note

Once you map the configured Sample Template to a template widget in App Designer, you must specify the swipe button styles in the appropriate listener file of the template widget and ensure that the enableSwipeBtn attribute is specified as true, as shown in the following sample code snippet:

Code Block
languagejs
CWEH.registerHandler('SAMPLE_TEMPLATE', CWEC.WIDGET_RENDERED, function (ele) {
	var sliderId = $('#SAMPLEFORM-ITEMID-swipebtn-slider');
    $(this).swipeButtonHandler(sliderId, 'ITEMID', {}, {
								  "enableSwipeBtn": true, //Ensure that the enableSwipeBtn is specified as true for enabling the swipe button
								  "labelBeforeSwipe": "Pay Submit",
								  "labelAfterSwipe": "Unswipe",
								  "iconBeforeSwipe": "locker",
								  "iconAfterSwipe": "unlocked"
								}, function() {
									console.log(this);
									var _this = this;
    	ct.launch({formId:"CT_PAYMENT_FORM",containerId:"CONTAINER_FORM",presetId:["BS-SIZE-M"],
    	/The below snippet is to restore the class of the swipe button/
		callback:function() {
    			console.log(_this);
    			var swipeSlideText = _this.tmpContainerId + '-' + _this._itemId + '-swipebtn-slide-text';
    			var sliderId = _this.sliderId;
    			$('#'+ swipeSlideText).fadeTo(300, 1);
                            sliderId.animate({
                                left: "-10px"
                              }, 300);
                        sliderId.removeClass('unlocked');
                        $('#locker').text('lock_open');
                        sliderId.css({'left': '-10px'});

    	}});
    });
});

Refer App Designer - Templates to create a template widget using App Designer in Canvas Studio.

Refer Creating Workspaces to map the created template widget to a workspace using Workspace Designer in Canvas Studio.

...