Template Style

Extension Packs are solutions that help accelerate the Youreka implementation process. This Pack includes Salesforce automation to help customize the font, format, style and more for each form Template! It also allows you to update all of your Active Form Templates with the CSS from a specific record.

Here is a preview of the CSS Selector solution in action:

Below, we have created a Form Template and selected the Template Style tab. Then we selected a custom format to make radio buttons larger in the form:

Here is a preview of radio buttons before the style change:

And a capture after the custom style change:

While this is a very simple example, you can make some powerful changes to form styles in this package quickly and easily.  In fact, check out a fully styled Youreka form here:

 

Here is a preview of pushing CSS from one Template to All Active Templates:

Below we have created a Form Template and already added CSS to it, and now we can push that value to all Active Form Templates!

What is in the Package?

• One Custom Metadata object (Youreka CSS Snippet) with fields
• One Lightning Page
• Two Salesforce Flows
• One Action

Installing the Package

*Requirements: Be sure to have the most recent Youreka app installed from the AppExchange*

The Extension Pack can be installed in a production or sandbox environment. Here are the installation links:

Production: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t8X000000MmW7

Sandbox: https://test.salesforce.com/packaging/installPackage.apexp?p0=04t8X000000MmW7

Please install for all users or the profiles who will be creating, viewing, or completing Forms. 

Configuration

After installation, there is very little setup required. These are standard Salesforce Flows and will automatically turn on upon install.  All we need to do is either place them on a layout, or create a lightning layout! 

If you already have a Lightning layout on the Form Template object, add a tab and put our new Screen Flow (Form Template CSS) on the layout.

For this, please go to Salesforce Setup and edit the Form Template page. Then add a new Tab, give it a Custom Label of Template Style (or something you prefer) and drag in the Flow component. On the right side, select the Form Template CSS flow and tick the box to pass in the record id of the Form Template record you are on:

If you do not have a Form Template Lightning Page layout already, we have included one in the package, so all we need to do is activate it. Below is a preview of activating a Lightning Page layout.

For this, you will need to go to Salesforce Setup, search App Builder and edit the Form Template with CSS Style Lightning Page Layout. Then activate it as the org default or for the users who will be using it:

We have also included an action in the package that will apply the CSS you’ve selected and edited on your Form Template and will push it to all Active Form Templates. To access, this, you just have to edit your page layout and add the Push CSS to All Templates action to your Form Template Layout and save:

How the Solution Works:

The Screen Flow presents a library of CSS Style options in a list. You can select one or more and it will copy the CSS snippet from a Custom Metadata record and push that value to the CSS CompleteForm field and CSS FormDetail field on your Form Template. That snippet tells each form to change the formatting when a form is being filled out or viewed respectively. Afterward, you can go into the CSS Field on the Form template and change the field further. Feel free to change the font, size, format or even delete it out entirely.

In the event that previous CSS existed on the form template, going through this screen flow will reset that style and insert new style on the Form Template.

Please note that some styles apply to the mobile experience while others apply to desktop and some apply to both. There are columns included in the flow to show where the style will be experienced.

List of Available CSS Styles:

Label	Description	Applicable on Mobile	Applicable  on Desktop	Category
3 Columns or More	Allows you to have 3 or more columns for all of your questions. Works better on larger devices or desktop. Form Template must be in a single column, then this formatting applies to columns. Please update the number of columns and spacing in the CSS as you desire.	✅	✅	Formatting
Add Custom Logo on CompleteForm	Adds a small logo/icon on CompleteForm (desktop only). Consider changing the URL and hex in the CSS to your liking	❌	✅	Color
Adjust Background Image	Changes the background image of the form. Change the image URL and hex code to your liking	❌	✅	Color
Adjust Font Styles	Adjust fonts on CompleteForm. Edit the fonts in the CSS to your liking	❌	✅	Font
Adjust Form Template Name Color	Changes the color of the Form Template name at the top of the CompleteForm page. Be sure to adjust the hex code to your liking	✅	✅	Color
Adjust Form Width	Changes the width of the entire form area. Adjust the pixels to your liking	❌	✅	Sizing
Adjust Save Button Colors	Changes the colors of the save buttons in the save bar in CompleteForm. Adjust the hex codes to your liking	❌	✅	Color
All Question Labels Bold	All question labels are bold	✅	✅	Formatting
Change Save Button Bar Color	Adjust the color of the top bar when viewing a Youreka form on desktop	❌	✅	Color
Font Size: Medium	Makes the font size of information in the form slightly larger than normal	✅	✅	Sizing
Font Size: Large	Makes all fonts in the form template large	✅	✅	Sizing
Form Background Color	Adjusts the background color of the form. Consider changing the hex code to your liking	✅	✅	Color
Highlight Required Questions	All required questions have colored borders around them	✅	✅	Color
Labels Above Wide Inputs	Widens all question inputs to maximum, and places the question label above each question	✅	✅	Formatting
Left Align Questions	Left aligns all questions in the Form Template	✅	✅	Alignment
Make Checkboxes Bigger	Enlarges all checkbox questions	✅	✅	Sizing
Make Long Text Boxes Bigger	Increases the size of long text questions. Adjust the variables in the CSS to your liking	✅	✅	Sizing
Match Salesforce Style	This one does a bunch of stuff, but at the end, the form looks like a Salesforce lightning page	❌	✅	Formatting
Pin Navigation Menu On Web	Permanently pins the navigation menu when viewing CompleteForm on desktop	❌	✅	Other
Radio Buttons: Large	Converts all radio buttons to large sized	✅	✅	Sizing
Radio Buttons: Massive	Converts all radio buttons to massive sized	✅	✅	Sizing
Radio Buttons: Medium	Converts all radio buttons to medium sized	✅	✅	Sizing
Remove Refresh Icons on Formulas	Eliminates the refresh arrow that naturally occurs next to a formula field link	✅	✅	Other
Section Header Footer Background Color	Changes the color of SECTION headers and footers. Consider changing the hex codes to your liking	✅	✅	Color
Set All Radio Buttons To Verbose	Adjusts all of the radio buttons in the Form Template to be stacked on top of one another (verbose setting) compared to larger radio buttons	✅	✅	Alignment
Show Picklists at Checkbox Lists	Displays Picklist question types as checkbox lists instead	❌	✅	Formatting
Wide Picklists	Increases the width of all picklist questions	✅	✅	Sizing

This Salesforce Flow is called Form Template CSS. The second Salesforce Flow updates all Active Form Templates with the current CSS is called Global CSS. These are both standard flows in salesforce, so feel free to modify it to your liking.

That is it. Give yourself a pat on the back then test it out. Please let us know if you have any questions.