Using JavaScript

A trigger can be created using JavaScript as well, it can be used when data-fs-etag does not apply such as: on page load, as exit strategy, long wait time, inactivity…

Fs.bind( '#element', 'click:request-call-back', {
     trigger: {
         moduleid: '...'
     },
     el: '@moduleid',
     opt: {
         placement: '...',
         size: '...',
         theme: '...'
     },
     rel: {
         message: {
             subject: 'Call me regarding this page'
         }
     }
});
	

Creating a callback

When applying connections to a module, instead of connecting a module, you can create a connection to a callback. Provided callback must match callback method

FS.createCallback( 'myCallback', ( response, interaction ) => {
    console.log(response);
});
	

Push contents

When using callbacks, an easy method is to use interaction.contents() to push text to the body of an interaction.

FS.createCallback( 'myCallback', ( response, interaction ) => {
    /**
     * contents(), only supports text.
     */
    interaction.contents('Hello World'); 
});
    

Create an element using virtual DOM

When using callbacks, the safest way to add html to the body of an interaction is interaction.createElement().

FS.createCallback( 'myCallback', ( response, interaction ) => {
    /**
     * createElement(), uses a virtual DOM technique.
     * Supports: JSON, and Object
     */
    interaction.createElement({
        tagName: "div",
        attrs: {
            class: "alert alert-info"
        },
        children: [{
            tagName: "p",
            children: [{
                tagName: "strong",
                children: [{
                    tagName: "content",
                    content: "Example alert"
                }]
            }]
        }]
    });
});
    

Creating a custom event

A quick overview on creating and implementing custom events:

1) Creating the trigger

/**
 * NOTE: The specified event within the etag, always starts with "on" and always lowercase.
 **/
<div 
    data-fs-etag='on{custom}:some-element-or-tag-name'
    data-fs-params='{
        "trigger": {
            "moduleid": "{moduleid}"
        }
    }'></div>
    

2) Creating a listener by tagging the appropriate element

 /**
  * In this example we will tag a text input, 
  * and create a relationship between the text input
  * data-fs-custom='some-element-or-tag-name'
  * and the trigger in this case the 
  * etag = on{custom}:some-element-or-tag-name,
  * NOTE: data-fs-{custom} is always lowecase, no "on". 
  **/   
    data-fs-custom='some-element-or-tag-name'
    

3) Setting display and placement options

<div 
    data-fs-el='@{moduleid}'
    data-fs-opt='{
        "display": "embed",
        "size": "full"
        "theme": "translucent"
    }'></div>
    

4) Creating the custom event

/**
 * Create the event.
 * NOTE: The event name must always start with a capital letter, and preceded with "on" like so: onCustom, onMove, onDrag...
 * Once we have a match, you will have to fire an interaction if your set of conditions are met.
 **/    
FS.createEvent( 'on{Custom}', ( e, elem ) => {
    /**
     * Retrieve the element, check if the value is correct.
     **/
    if( 'Interact now' == elem.value ) {
        /**
         *  If successful, fire the interaction, on the elem object.
         **/
        elem.interaction('fire');
    }
});
    

Add offset to all interactions

Offset all interactions.

FS.offsetPositions({
    up: 0.01,
    right: 0.01,
    down: 0.01,
    left: 0.01
});
        

Localize modules

This feature, creates a fallback system in case the connection with the Form Synergy server is lost or broken.

NOTE: You will need to download the strategy in order to user this feature, read more, You must enable heart beat as well, heart beat

FS.setLocalMode({
    endPoint: '',  //Where to send request
    request: {
        key: 'value' // Passing additional data to the request
    },
    response: {
        'success': 'Successful response',
        'error': 'Error response'
    },
});