Enabling Swipe Button for Row Templates

To enable the swipe button for row templates in Canvas Studio, perform the following steps:

On the home page of Canvas Studio, click Create > Template.
In the Template form, provide the following information:

Screen Item	What to provide
Template ID	Provide a unique ID for the Template. For example, SAMPLE_TEMPLATE.
Template Description	Small 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. 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: <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.
Submit	Submit the configuration of the template.

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:

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.

The following screen shot showcases the Sample Template widget with an enabled swipe button in the functional application, Modelhouse:

On enabling the swipe action for the button in the Sample Template widget, the Initial Form appears, as shown in the following screen shot: