JSBridge examples

This article describes use-case specific examples using the JSBridge.

Resco JavaScript Bridge
Offline HTML Debugging offline HTML Execute JavaScript from rules JSBridge on GitHub JSBridge on npm JSBridge reference Resco Agents (better AI assistants) React with JSBridge JSBridge examples

Warning

Work in progress! We are in the process of updating the information on this page. Subject to change.

MessageBox too short - text gets cut off

When displaying text using a MessageBox alert, you might encounter an issue where the text is cut off due to its length. A practical solution to this problem is to use an iFrame within a modal window instead of a standard Alert. This approach allows for the display of content in a scrollable iFrame, which can be interacted with like a typical HTML page. Additionally, this method enables the use of CSS and JavaScript for enhanced presentation and functionality.

JavaScript Function for Modal iFrame

The code begins with a JavaScript function named alert. This function makes a request to MobileCRM.Configuration to fetch configuration settings. Using these settings, it sets up and displays an iFrame as a modal window. The iFrame loads an HTML document from a specified path, and text content (var test) is passed to it, overcoming the limitation of the MessageBox's text capacity.

function showAlert() {   
    MobileCRM.Configuration.requestObject(function (config) {   
        var messageText = `Lorem ipsum`; // Consider parameterizing this if the text changes 
        var documentPath = config.storageDirectory + "/WWW/index.html";    
         var options = { 
            text: messageText 
        }; 
         MobileCRM.UI.IFrameForm.showModal("TestIframe", documentPath, options);   
    });   
}

HTML Structure and JavaScript for Content Display

Following the JavaScript function, the HTML document to be loaded in the iFrame is defined. This document includes a basic HTML structure with a heading and a paragraph tag. The included JavaScript script in this HTML is responsible for dynamically handling and displaying the content within the iFrame. This is an example that handles the input text by dividing it into individual lines. You can format the input text as necessary for your scenario.

<!DOCTYPE html>   
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">   
<head>   
    <!-- Head contents... -->  
</head>   
<body>   
    <h1>List of something</h1>   
    <p id="iframeText"></p>   
    <script>   
    window.onload = function () {   
        MobileCRM.UI.IFrameForm.requestObject(function (iFrame) {   
            var textContent = iFrame.options.text || ''; 
            var eachLine = textContent.split('\n');   
            var textParagraph = document.getElementById('iframeText'); 
            eachLine.forEach(function (line) {   
                textParagraph.innerHTML += line + "<br>";   
            });   
        }, MobileCRM.bridge.alert, null);   
    }   
    </script>   
</body>   
</html>