The Basics of JavaScript and CSS Extensions

Thank you for using SkyVisualEditor! This tool is loaded with handy features that let you modify your Salesforce page layouts (e.g. font size, color, size of the input fields, etc.) or even use JavaScript to do calculations and change displays. These modifications can be done simply by changing property settings.

When you are designing a page, there are times when you want to take further steps to improve your design. SkyVisualEditor supports Apex, JavaScript, and CSS extensions to help you do that. This blog post will introduce how to take a step further in designing a page that uses JavaScript. We are going to assume you understand the basics of creating a SkyVisualEditor page and will simply cover the additional steps post creation of the basic page.

The Basics of JavaScript Extensions (Using JQuery) With SkyVisualEditor

1. Export using “jQuery”, not “$”

Basically, “$Function” is used to declare jQuery when writing code. This applies to jQuery read in with SkyVisualEditor. “$Function” is a type of function with many extension libraries such as prototype.js.

“$Function” is frequently used as a shortcut for the jQuery Object, which is the core of jQuery. This command is used to avoid conflict between libraries used to define “$Function”.

When using noConflict, you will need to declare jQuery to call the jQuery Object. This rule applies within SkyVisualEditor as well.

EX: Write jQuery(“div p”) instead of $(“div p”)

2. Retrieve data by backward matching when using ID Selector for jQuery

With Visualforce, the ID attribute in HTML code will have a prefix attached automatically to it after the page deploys. For example, let’s place a Save Button with its ID attributed as “SaveButton”.

Deploy the page and right-click the deployed page to view its source code. You will see “j_id0:sve_form1:Component1:j_id71:bottom: added to the ID name.

The highlighted text read as follows: id=”j_id0:sve_form1:Component1:j_id71:bottom:SaveButton”

You could use the below code to retrieve a button with jQuery.

jQuery(‘[id$=\\:SaveButton]’)

**Note: you will need to apply two \\ in the Selector to escape when you are going to use the following characters: ! ” # $ % & ‘ ( ) * + , . / : ; < = > ? @ [ \ ] ^ ‘ { | } ~

Let’s design a button

Let’s extend the button with CSS. Our support team receives questions like “I would like to create a page that looks good on an iPad and would like to change the size of the buttons for better utilization. I understand the width of the button can be altered in the property settings, but how can I change the height?”

In SkyVisualEditor, set the width of your Cancel button to 120px. Now we can change the height. Go to SkyVisualEditor’s Page tab, on the right-hand side of the studio. Then expand the section called Page Script. Click the Edit PageScript button.

Let’s use the magical code as seen below:

jQuery(document).ready(function(){

write code here to make it into an action that occurs during page loading

});

In this example, we are going to retrieve the button by its ID and then set its height to 60px with CSS. Here is how the code looks

jQuery(document).ready(function(){

jQuery(‘[id$=\\:SaveButton]’).css(‘height’,’60px’);

});

Let’s deploy the page! Below is an example of how this page looks once it is deployed into my Salesforce organization:

Hmm…something is wrong. The reason for this is because the Salesforce standard background style is applied to the button. Let’s go to the property settings to edit the font color to white and use JavaScript to set the background color to something more pleasant. Using CSS we will change the background color to the hex value of 137cbd, which is a shade of dark blue.

jQuery(document).ready(function(){

jQuery(‘[id$=\\:SaveButton]’).css(‘height’,’60px’);

.css(‘background’,’#137cbd’);

});

Let’s deploy the page again and see how this turned out. The button is now blue. This is quite a drastic change!

Now we need to add this style change to the Cancel button on the right. You can add the button’s ID to the code by separating the ID sections with a comma. Below is how you target both button IDs to place the same CSS changes on them.

jQuery(document).ready(function(){

jQuery(‘[id$=\\:SaveButton],[id$=\\:CancelButton]’).css(‘height’,’60px’);

.css(‘background’,’#137cbd’);

});

Deploy your page again and see the finished product in today’s example!

That’s about it. I went over some of the basics to edit the properties on buttons. I will be going through a similar style of tips in the future. Thanks for reading!