Follow

Overrides

Overrides enable you to use JavaScript to override a mobile control's content and behavior, as inherited from its corresponding web control, in order to create a mobile-optimized user workflow and experience. This article provides an overview of overrides as well as some example use cases, including:

Types of Overrides

Within the Capriza Designer, it is possible to override virtually any type of control. While the exact options will depend upon the control type, they can be broadly categorized into two types: 

  • Web Properties: Changes attributes of the control itself, such as changing the items in a popup menu, changing label text, etc.

  • Actions: Modifies the control's behavior when acted upon by the user. Examples include clicking a button, opening a lookup field, etc.

  

Example Use Cases

Popup Menu

An override can be used to change the options displayed in a popup menu. In this example, three options from the web application are included in the popup menu: Back to Portal, Employee Directory, and My Profile.

 

To create the override, click the wrench icon to open the Web Properties dialog.

 

 

Navigate to the "Properties" tab. To ensure that the override affects all potential options in the popup menu, check that "All Options" is selected under "Which menu options should be available in the Zapp?"

 

 

Scroll down to view the available override settings. They are contained in two section: Web Properties and Override Actions.

 

 

Hovering over any of the "i" icons reveals a list of available variables and functions for your JavaScript override. Please see the JavaScript Objects article for more information.

 

 

To change the options included in the popup menu, select toggle on the "Open popup-menu" override.

 

 

A text input field will appear. Enter your script.

 

 

Clicking the arrows icon opens a larger JavaScript editor.

 

 

Exit the dialog. The updated options will now display when the popup menu is opened.

 

Use Another Field for Label Text

 

Overrides can also be used to replace a text field's label with text from another field on the page. To enable this type of override, open the "Properties" tab and scroll to the Web Properties section. Toggle on the "Use dynamic display label" setting.

 

 

Select "Override" from the dropdown.

 

 

Enter your JavaScript code. In this example, the label is replaced with text from a field called "title," which is pulled via its XPath. Please see the JavaScript Objects article for more information.

 

 

Changing Text Color Based on Value

 

The following three videos demonstrate how to change text color based on an element's value. Part 1 begins with a simple example using Salesforce.

 

 

In this first example, a Leads report in Salesforce includes a field called "Lead Status" that indicates the lead's quality. An override can be used to add color indicators to this field in the mobile table, enhancing the user experience.

 

Screen_Shot_2017-06-16_at_12.48.58_PM.png

 

First, open the Web Properties dialog for the "Lead Status" field by hovering over the mobile preview and clicking the wrench icon.

 

Wrench_icon.png

 

Navigate to the "Properties" tab and scroll to "Text Retrieval Method."

 

Text_Retrieval.png

 

Open the dropdown, and choose "Override."

 

Screen_Shot_2017-06-16_at_1.31.09_PM.png

 

Enter the below code into the box.

 

Screen_Shot_2017-06-16_at_12.50.48_PM.png

 

//Declare a text variable
var text = element.textContent.trim();

//Declare a color variable
var color;

//Specify what the color should be based on the value of text
if (text === 'Qualified') {
    color = 'grey';
} else if (text === 'Unqualified') {
    color = 'red';
} else if (text === 'Open') {
    color = 'royalblue';
} else if (text === 'Contacted') {
    color = 'green';
}


//Use the color and text variable to construct html string
'<span style="color:' + color + ';font-weight:gold;">' + text + '</span>';

 

The "Lead Status" field in each table row will now appear in the appropriate color.

 

Screen_Shot_2017-06-16_at_12.51.05_PM.png

 

Part 2 of the video series provides a second example, this time in SAP.

 

 

In this second example, a Stock Requirements Zapp indicates the remaining stock of each type of material. You can use an override to highlight the color of the "Plant Stock" field in a different color depending on its value.

 

Screen_Shot_2017-06-16_at_1.30.12_PM.png

 

First, hover over the "Plant Stock" field, and click the wrench icon to launch the Web Properties dialog.

 

SAP_Wrench.png

 

Change the "Text Retrieval Method" to Override, and enter the below code into the box.

 

Screen_Shot_2017-06-16_at_1.33.32_PM.png

 

 

// Get the value as a string: "1,398"
var text = element.querySelector("input").value;


// Convert the string to a number: 1398
var number = Number(text.replace(' , ',
''));


// Determine color based on value
var color; 
if (number > 100) { 
    color = 'green'; 
} else { 
    color = 'grey'; 
} 

//Use text and color to construct an html string
'<span style="background:' + color +
';color:white;padding:3px;border-radius:2px;">' + text + '</span>';

 

The background color of Plant Stock will now vary based on its value.

 

Screen_Shot_2017-06-16_at_1.34.08_PM.png

 

Part 3 provides a more advanced example that leverages existing functionality on the web application page.

 

 

In this final example, rather than rely on the value of a string or an element's textContent, you can leverage the color displayed in the "Light" column within the SAP table to vary the color and text of Plant Stock.

 

Screen_Shot_2017-06-16_at_1.34.56_PM.png

 

Again, open the Web Properties dialog, and change the "Text Retrieval Method" to Override. Enter the below code in the textbox.

 

//Declare src variable (based on src property of the image)
var src = element.querySelector('img').src;

//Declare separate variables for red and green lights
var redSrc = 's_s_tl_r.gif';
var greenSrc = 's_s_tl_g.gif';

//Declare color and text variables
var color;
var text;

//Specify color and text variable values based on src variables
if (src.indexOf(redSrc) > -1) { 
    color = 'red' ; 
    text = 'Order now' ; 
} else if (src.indexOf(greenSrc) > -1) { 
    text = 'Ok'; 
} 

//Use color and text to construct and html string
'<span style="color:' + color + ';font-weight:bold;">' + text + '</span>';

 

The appropriately styled text will now appear in place of the Plant Stock value in each table row.

 

Screen_Shot_2017-06-16_at_2.19.04_PM.png

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.