Versions Compared

Version Old Version 6 New Version 7
Changes made by

Lakshminarayanan1 S CTOO

Lakshminarayanan1 S CTOO

Saved on

Key

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

...

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.

...