...

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, 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,
								  "labelBeforeSwipe": "Pay Submit",
								  "labelAfterSwipe": "Un-Swipe",
								  "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 /wiki/spaces/CTv21/pages/1994686618 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.

...