How Can We Help?

Changing button colours or hiding them

You are here:

In some cases you may want to hide buttons or change their default colours and this can be easily achieved within the Sintel Forms Designer using rules with a little CSS.

This applies to:

  1. Actions
  2. Save
  3. Close
  4. Export to PDF
It is already possible to hide both the “Actions” button and the “Export to PDF” button by disabling these 2 features within the Sintel Forms Designer. It is also possible to hide the “Save” button and the “Export to PDF” button using the “Disable or hide features” step within the logic screen. However, customers often have a requirement to only permit a single user or group of people to use certain buttons and this is where a little CSS comes in very useful!

 

Option 1 – Hiding buttons

Launch the Sintel Forms Designer and open the Logic screen. You can add rule that uses the “Section – set html content” step to set the HTML of one of your sections to the following CSS:

<style>
span[automation-id="workflowActionsButton"]{
display: none !important;
}

span[automation-id="buttonSave"]{
display: none !important;
}

span[automation-id="buttonClose"]{
display: none !important;
}

span[automation-id="buttonExportToPDF"]{
display: none !important;
} </style>
Default Buttons

Before showing the default buttons

 

 

 

 

 

After No Buttons

After showing no buttons

 

 

 

 

 

 

Option 2 – Changing button colours

Using a similar approach you can add a rule that uses the “Section – set html content” step to set the HTML of one of your sections to the following CSS:

<style>
span[automation-id="workflowActionsButton"]>button{
background: #e91e63 !important;
}

span[automation-id="buttonSave"]>button{
background: #4caf50 !important;
}

span[automation-id="buttonClose"]>button{
background: #ff9800! important;
}

span[automation-id="buttonExportToPDF"]>button{
background: #00bcd4 !important;
}
</style>
Before showing the default buttons

Before showing the default buttons

 

 

After showing custom buttons

After showing custom buttons

 

 

 

 

 

 

 

 

 

Option 3 – Changing the “OK” button

Using a similar approach to options 1 and 2 above you can change the colour of the OK button on confirmations screens by adding a rule that uses the “Section – set html content” step to set the HTML of one of your sections to the following CSS:

<style>
div.ms-Dialog-main button{
background: #e91e63 !important;
}
</style>

Alternatively, if you prefer, you could add this CSS within the Sintel Forms Designer->Settings->Confirmation Screens (just make sure there are no spaces and hit “Show preview” to check it before saving it)

<style>div.ms-Dialog-main button{background: #ff9800! important;}</style>

Before showing default confirmation screen

Before showing default confirmation screen

 

Before showing custom confirmation screen

After showing custom confirmation screen

Table of Contents

Newsletter sign-up