PRESIDECMS-3315: Webflow allow custom action buttons without overiding entire layout

system/assets/css/admin/specific/webflowlayout/adminWebflowLayout.less

@@ -2,35 +2,48 @@
 	.preside-theme {
 		.webflow-layout {
 			.webflow-step-title {
-				margin-top: 40px;
-				margin-bottom: 30px;
-				padding-bottom: 6px;
-				border-bottom: 1px solid #e2e2e2;
-				font-size: 22px;
-				font-weight: normal;
+				margin-top     : 40px;
+				margin-bottom  : 30px;
+				padding-bottom : 6px;
+				border-bottom  : 1px solid #e2e2e2;
+				font-size      : 22px;
+				font-weight    : normal;
 			}
 
 			.webflow-action-buttons {
-				border-top: 1px solid #e2e2e2;
-				padding-top: 20px;
-				margin-top: 20px;
+				display         : flex;
+				flex-direction  : row;
+				flex-wrap       : wrap;
+				align-items     : center;
+				gap             : 10px;
+				border-top      : 1px solid #e2e2e2;
+				padding-top     : 20px;
+				margin-top      : 20px;
 
-				.webflow-cancel-btn-container,
-				.webflow-prev-btn-container {
-					float: left;
+				.webflow-cancel-btn-container {
 
 					.webflow-cancel-btn {
-						padding: 12px 6px;
-						display : inline-block;
+						padding : var( --button-padding-vertical, 7px ) var( --button-padding-horizontal, 10px );
 					}
+				}
+
+				.webflow-extra-btn-container {
+
+					&-standalone {
+						margin-left : auto;
+					}
+
+					&-next {
+						margin-left : auto;
 
-					.webflow-prev-btn {
-						margin-right: 10px;
+						+ .webflow-next-btn-container {
+							margin-left : 0;
+						}
 					}
 				}
 
 				.webflow-next-btn-container {
-					float: right;
+					margin-left : auto;
 				}
 			}
 

system/handlers/webflow/Default.cfc

@@ -219,23 +219,83 @@ component {
 	}
 
 	private string function actions( event, rc, prc, args={} ){
-		var extraQs       = "";
-		var useAjaxLayout = isTrue( args.useAjaxLayout ?: false );
+		var extraQs                       = "";
+		var useAjaxLayout                 = IsTrue( args.useAjaxLayout ?: "" );
+		var additionalAction              = IsStruct( args.additionalAction ?: "" ) ? Duplicate( args.additionalAction ) : {};
+		var additionalActionHandler       = Trim( args.additionalActionHandler ?: "" );
+		var additionalActionHandlerResult = "";
+		var additionalActionHref          = "";
+		var additionalActionUrlValue      = "";
+		var webflowActionQs               = "";
 
 		if ( useAjaxLayout ) {
 			extraQs = "&args.useAjaxLayout=true&_rurl=#args.returnUrl ?: ""#";
 		}
 
+		webflowActionQs = "csrfToken=#event.getCsrfToken()#&_wid=#UrlEncode( args.obfuscatedFields )##extraQs#";
+
 		if ( IsTrue( args.hasNext ?: "" ) && IsFalse( args.disableNext ?: "" ) ) {
-			args.nextButton = renderViewlet( event="webflow.default.nextButton", args=args );
+			args.nextButton = _renderActionButtonViewlet(
+				  viewletEvent   = args.nextButtonViewlet ?: ""
+				, defaultViewlet = "webflow.default.nextButton"
+				, args           = args
+			);
 		}
-		if ( IsTrue( args.hasPrev ?: "" ) && IsFalse( args.disablePrev ?: "" )  ) {
-			args.prevLink   = args.prevLink ?: event.buildLink( linkto="webflow.default.backAction", queryString="csrfToken=#event.getCsrfToken()#&_wid=#UrlEncode( args.obfuscatedFields )##extraQs#" );
-			args.prevButton = renderViewlet( event="webflow.default.prevButton", args=args );
+		if ( IsTrue( args.hasPrev ?: "" ) && IsFalse( args.disablePrev ?: "" ) ) {
+			args.prevLink   = args.prevLink ?: event.buildLink( linkto="webflow.default.backAction", queryString=webflowActionQs );
+			args.prevButton = _renderActionButtonViewlet(
+				  viewletEvent   = args.prevButtonViewlet ?: ""
+				, defaultViewlet = "webflow.default.prevButton"
+				, args           = args
+			);
 		}
 		if ( IsTrue( args.canCancel ?: "" ) ) {
-			args.cancelLink   = args.cancelLink ?: event.buildLink( linkto="webflow.default.cancelAction", queryString="csrfToken=#event.getCsrfToken()#&_wid=#UrlEncode( args.obfuscatedFields )##extraQs#" )
-			args.cancelButton = renderViewlet( event="webflow.default.cancelButton", args=args );
+			args.cancelLink   = args.cancelLink ?: event.buildLink( linkto="webflow.default.cancelAction", queryString=webflowActionQs );
+			args.cancelButton = _renderActionButtonViewlet(
+				  viewletEvent   = args.cancelButtonViewlet ?: ""
+				, defaultViewlet = "webflow.default.cancelButton"
+				, args           = args
+			);
+		}
+
+		if ( Len( additionalActionHandler ) && getController().handlerExists( additionalActionHandler ) ) {
+			additionalActionHandlerResult = runEvent(
+				  event          = additionalActionHandler
+				, private        = true
+				, prePostExempt  = true
+				, eventArguments = { args=args }
+			);
+
+			if ( IsStruct( additionalActionHandlerResult ) ) {
+				StructAppend( additionalAction, additionalActionHandlerResult, true );
+			}
+		}
+
+		args.additionalActionLabel = Trim( additionalAction.label ?: "" );
+		args.additionalActionClass = Trim( additionalAction.class ?: "" );
+		args.extraButtonGroupWith  = LCase( Trim( additionalAction.groupWith ?: "next" ) );
+		additionalActionUrlValue   = Trim( additionalAction.url ?: "" );
+
+		if ( Len( additionalActionUrlValue ) ) {
+			if ( ReFindNoCase( "^(https?:|/|##|\?|//)", additionalActionUrlValue ) ) {
+				additionalActionHref = additionalActionUrlValue;
+			} else if ( getController().handlerExists( additionalActionUrlValue ) ) {
+				if ( event.isAdminRequest() ) {
+					additionalActionHref = event.buildAdminLink( linkto=additionalActionUrlValue, queryString=webflowActionQs );
+				} else {
+					additionalActionHref = event.buildLink( linkto=additionalActionUrlValue, queryString=webflowActionQs );
+				}
+			}
+		}
+
+		args.additionalActionUrl = Trim( additionalActionHref );
+
+		if ( Len( args.additionalActionLabel ) && Len( args.additionalActionUrl ) ) {
+			args.extraButton = _renderActionButtonViewlet(
+				  viewletEvent   = args.extraButtonViewlet ?: ""
+				, defaultViewlet = "webflow.default.extraButton"
+				, args           = args
+			);
 		}
 
 		return renderView( view="/webflow/default/actions", args=args );
@@ -503,4 +563,14 @@ component {
 		}
 		return event.buildLink( linkto="webflow.default.submitAction" );
 	}
+
+	private string function _renderActionButtonViewlet(
+		  required string viewletEvent
+		, required string defaultViewlet
+		, required struct args
+	) {
+		var eventPath = Len( Trim( arguments.viewletEvent ) ) ? arguments.viewletEvent : arguments.defaultViewlet;
+
+		return renderViewlet( event=eventPath, args=arguments.args );
+	}
 }

system/i18n/webflow.properties

@@ -2,11 +2,16 @@ next=Next
 back=Back
 cancel=Cancel
 
+button.prev.class=
+button.cancel.class=
+button.extra.class=
+button.next.class=
+
 error.unexpected.submission.error=There was an unexpected error processing your submission. If the problem persists, please contact the website administrator.
 error.missing.submission.args=There was an unexpected error processing your submission. If the problem persists, please contact the website administrator.
 error.csrf.token.invalid=The page you submitted has expired and we have prevented processing of your submission as a security precaution. Please re-submit the page to continue.
 error.validation.errors=There were one or more problems with your submission. Please amend any errors indicated below and try again.
 error.inactive.timeout=Your progress has been reset due to a period of inactivity. Please try again.
 error.step.not.found=Your progress has been reset due to a period of inactivity or an unexpected internal error. We apologize for the inconvenience caused. Please try again.
 
-ajaxLayout.missing.link.error=There was an unexpected error displaying your progress. If the problem persists, please contact the website administrator.
+ajaxLayout.missing.link.error=There was an unexpected error displaying your progress. If the problem persists, please contact the website administrator.

system/views/webflow/default/actions.cfm

@@ -1,12 +1,20 @@
 <!---@feature webflow--->
 <cfscript>
 	event.include( "/js/frontend/webflow/actions/" );
+
+	extraButtonGroupWith = args.extraButtonGroupWith ?: "next";
 </cfscript>
 
 <cfoutput>
 	<div class="webflow-action-buttons clearfix">
 		#( args.prevButton ?: "" )#
+		<cfif extraButtonGroupWith == "prev">
+			#( args.extraButton ?: "" )#
+		</cfif>
 		#( args.cancelButton ?: "" )#
+		<cfif extraButtonGroupWith neq "prev">
+			#( args.extraButton ?: "" )#
+		</cfif>
 		#( args.nextButton ?: "" )#
 	</div>
-</cfoutput>
+</cfoutput>

system/views/webflow/default/cancelButton.cfm

@@ -2,13 +2,18 @@
 <cfscript>
 	btnTitle   = args.stepConfig.cancel_button ?: "";
 	cancelLink = args.cancelLink ?: "";
+	btnClass   = "webflow-cancel-btn";
 
 	if ( !Len( Trim( btnTitle ) ) ) {
 		btnTitle = translateResource( "webflow:cancel" );
 	}
+
+	if ( !event.isAdminRequest() ) {
+		btnClass &= " btn webflow-btn #Trim( translateResource( uri="webflow:button.cancel.class", defaultValue="" ) )#";
+	}
 </cfscript>
 <cfoutput>
 	<div class="webflow-cancel-btn-container">
-		<a href="#cancelLink#" class="webflow-cancel-btn" type="submit" default>#btnTitle#</a>
+		<a href="#cancelLink#" class="#btnClass#" type="submit" default>#btnTitle#</a>
 	</div>
-</cfoutput>
+</cfoutput>

system/views/webflow/default/extraButton.cfm

@@ -0,0 +1,23 @@
+<!---@feature webflow--->
+<cfscript>
+	btnTitle       = Trim( args.additionalActionLabel ?: "" );
+	btnLink        = Trim( args.additionalActionUrl   ?: "" );
+	btnClass       = Trim( args.additionalActionClass ?: "" );
+	groupWith      = LCase( Trim( args.extraButtonGroupWith ?: "next" ) );
+	containerClass = "webflow-extra-btn-container";
+
+	if ( groupWith == "prev" || groupWith == "standalone" ) {
+		containerClass &= " webflow-extra-btn-container-#groupWith#";
+	} else {
+		containerClass &= " webflow-extra-btn-container-next";
+	}
+
+	if ( !Len( btnClass ) && !event.isAdminRequest() ) {
+		btnClass = Trim( translateResource( uri="webflow:button.extra.class", defaultValue="" ) );
+	}
+</cfscript>
+<cfoutput>
+	<div class="#containerClass#">
+		<a href="#btnLink#" rel="nofollow" class="btn webflow-btn webflow-extra-btn #btnClass#">#btnTitle#</a>
+	</div>
+</cfoutput>

system/views/webflow/default/nextButton.cfm

@@ -1,9 +1,16 @@
 <!---@feature webflow--->
 <cfscript>
 	btnTitle = args.stepConfig.next_button ?: "";
+	btnClass = "btn webflow-btn webflow-next-btn";
+
+	if ( !event.isAdminRequest() ) {
+		btnClass &= " #Trim( translateResource( uri="webflow:button.next.class", defaultValue="" ) )#";
+	} else {
+		btnClass &= " btn-primary";
+	}
 </cfscript>
 <cfoutput>
 	<div class="webflow-next-btn-container">
-		<button class="btn btn-primary webflow-btn webflow-next-btn" type="submit" tabindex="#getNextTabIndex()#" default>#btnTitle#</button>
+		<button class="#btnClass#" type="submit" <cfif event.isAdminRequest()>tabindex="#getNextTabIndex()#"</cfif> default>#btnTitle#</button>
 	</div>
-</cfoutput>
+</cfoutput>

system/views/webflow/default/prevButton.cfm

@@ -2,9 +2,14 @@
 <cfscript>
 	btnTitle = args.stepConfig.back_button ?: "";
 	prevLink = args.prevLink ?: "";
+	btnClass = "btn webflow-btn webflow-prev-btn";
+
+	if ( !event.isAdminRequest() ) {
+		btnClass &= " #Trim( translateResource( uri="webflow:button.prev.class", defaultValue="" ) )#";
+	}
 </cfscript>
 <cfoutput>
 	<div class="webflow-prev-btn-container">
-		<a href="#prevLink#" rel="nofollow" class="btn webflow-btn webflow-prev-btn">#btnTitle#</a>
+		<a href="#prevLink#" rel="nofollow" class="#btnClass#">#btnTitle#</a>
 	</div>
-</cfoutput>
+</cfoutput>