How Can We Help?

Search for answers or browse about Sintel Forms.

Creating custom buttons using JavaScript

You are here:
The addCustomButton function will become available in the upcoming version of Sintel Forms (v.1.27). The old way of adding custom buttons is still available in the 2nd part of this article.

Using the logic feature, you can create your own custom buttons that will appear in a form and define their behaviour:

In order to achieve that, you need to use the addCustomButton() JavaScript function in one of the form’s logic rules. Here are some example calls of the function:

// Example A: button with a "Link" icon type, which link will be opened in the same tab as the form: 
addCustomButton("A custom button", "Link", "https://www.some-web-address.com"); 

// Example B: button with a "SetAction" icon type, which link will be opened in a new tab:
addCustomButton("Another custom button", "SetAction", { url: "https://www.some-web-address.com", target: "_blank" }); 

// Example C: button with a "FavoriteStar" icon type, with a custom onClick code: 
addCustomButton("Button with custom action", "FavoriteStar", function() { alert("Button has been clicked!") });

 

The addCustomButton() function accepts following parameters:

  • label of the button
  • icon type of the button. You can browse all available icon types on Microsoft’s Fluent UI icons page.
  • behaviour of the onClick action:
    • if it’s a string value, the page will be redirected to the provided string URL
    • if it’s an {url, target } object, the page will be redirected to the string URL from the url property, using the target defined in the target property.
    • if it’s a js function, it will simply be invoked on click

Using fully-custom js and css:

You can use the Logic feature to call custom JavaScript code that can manipulate the content of a form. This can be used to inject custom buttons into form’s layout.

You can download a form template containing the below example here.

Invoking custom JavaScript code – if used incorrectly – might even totally break the form. Make sure you know what you’re doing.

 

Example: injecting a button into the toolbar

 

Step 1: creating a custom style for the button

In order to make sure that the button looks similar to other buttons, you can style it by creating a custom CSS in the Custom HTML property of any section in the form:

<style>
.custom-button{
	background-color: transparent;
	color:  #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	height: 100\%; 
	padding: 0 8px;
	display: flex;
	align-items: center;
}

.custom-button:hover {
	color:  #333333;
	background-color:  #EAEAEA;
}

.custom-button:active {
	background-color:  #C8C8C8;
}
</style>

This style is being applied to a “custom-button” CSS class, that we will have to apply to our button later.

 

Step 2: creating a custom button in JS code

We will create a new rule in the Logic section, and put a single “Execute custom js” step there, with the following code:

const customButtonId = "customButton1";

let buttonAlreadyExists = document.getElementById(customButtonId);

if (!buttonAlreadyExists) {

	let customButtonDiv = document.createElement("div");
	customButtonDiv.id = customButtonId;
	customButtonDiv.className = "custom-button";
	customButtonDiv.innerHTML = "I am a custom button.";

	const customButtonsRoot = document.getElementById("custom-buttons-root");

	customButtonsRoot.appendChild(customButtonDiv)

	customButtonDiv.onclick = () => {		
		alert("The button has been clicked!");
	};

}

 

The code creates a new button and appends it to the “custom-buttons-root” HTML element, which is located right after all the toolbar buttons of the form.

Result:

custom.button.gif

Was this article helpful?
1 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Table of Contents