How to add business logic with JavaScript

Audience: Developers building Sapho micro apps

Sapho offers plenty of functionality that you can use to enhance your micro apps with business logic right out of the box, but drag and drop does have its limits. If you want to customize your micro apps more beyond the functionality offered by our drag and drop builder, you can use custom JavaScript code.

The JavaScript component

The key to adding custom business logic on your micro app’s frontend is the JavaScript component, which you can find within the set of Static Components in Page Builder.

The JavaScript component allows you to embed custom JavaScript code within a given page to enhance it with business logic such as formatting, navigation, or other functionality.

Simply add this component to your page and then click EDIT CODE to open up the code dialog window.

You can enter your own JavaScript code in the window or use the template snippets available in the dropdown menu.

The JavaScript API

From within your JavaScript code, you can access pages and their components through a very simple frontend API.

Below is a list of variables that are globally accessible within the JavaScript component and their methods:

Variable Method Description
sapho gotoPage(pageTitle) Redirects a user to the page whose title is used in the argument.
  isMobile() Returns true/false depending on whether the device is mobile or not.
app getPage(pageTitle) Returns a reference to the page object in the current app whose title is used in the first.
  getPages() Returns an array of all pages within the current app.
page getComponent(componentLabel) Returns a reference to the component object on the page whose label is used in the argument.
  getComponents() Returns an array of all components on the current page.
  getConnectorId() Returns the ID of the primary connector of the current page.
  isVisible() Returns true/false depending on whether the page is currently displayed on a client’s device.
  onPageLoad(function) Runs the function specified in the parameter right after the page is fully loaded.

The page.getComponent(componentLabel) method returns a Component object with the following methods:

Method Description
get() Returns the component’s value.
set(newValue) Sets the component’s value.
getElement() Returns the component’s jQuery element object. See jQuery API documentation for further information about the methods of this object.
isVisible() Returns true/false depending on whether the component is currently visible.
show() Makes a component visible.
hide() Hides a component.
enable() Enables a component.
disable() Disables a component.
action() Fires button’s default action. This method applies only for button component.

Common uses of JavaScript in Sapho

Change a component’s value

When you want to change a component’s value on a current page, use the following JavaScript code:

page.getComponent('lastname').set('Smith');

Show or hide a component

When you want to show or hide a UI component on a current page, use the following JavaScript code:

var stateCmp = page.getComponent('state');
var countryCmp = page.getComponent('country');
if (countryCmp.get() != 'USA') stateCmp.hide();

Change a component’s formatting

When you want to change a component’s text color on a current page, use the following JavaScript code:

var btn = page.getComponent('button').getElement();
btn.css('color', 'red');

Trigger a button’s action

When you want to trigger a button’s action, use the following JavaScript code:

page.getComponent('button').action();

Redirect to another page

When you want to redirect a user to another page, use the following JavaScript code:

sapho.gotoPage('Leads');

Detect mobile device

When you want to detect whether the type of device that the Sapho App is running on is either a desktop or mobile and based off that execute conditional business logic, use the following JavaScript code:

if (sapho.isMobile()) {
alert('running on mobile');
} else {
alert('running on desktop');
}

Wait for a page to load

It’s good practice to wait for a page to load before JavaScript code is executed. Here is an example of the code you would use to make this happen:

page.onPageLoad(function () {
page.getComponent('lastname').set('hello');
});