JSBridge examples: Difference between revisions

Revision as of 11:25, 19 February 2024

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 massageText) 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>

Is the question answered? - IsAswered property

The IsAnswered property of the MobileCRM.UI.QuestionnaireForm.Question object allows for checking if a question in a questionnaire form has been answered.

In practice, the MobileCRM.UI.QuestionnaireForm.onChange method is used to listen for changes within the form. If the "imagemedia" question is changed and detected as answered, it triggers predefined custom logic for further action:

MobileCRM.UI.QuestionnaireForm.onChange((qForm) => {
    var changedItem = qForm.context.changedItem;
    if (changedItem == "imagemedia") {
        var imageQuestion = qForm.findQuestionByName("imagemedia");
        if (imageQuestion.isAnswered === true) {
            // Implement custom logic here
        }
    }
}, true, null);

This approach utilizes the IsAnswered property to trigger specific actions when certain questions are answered, simplifying dynamic responses.

@@ Line 51: / Line 51: @@
 ==Is the question answered? - IsAswered property==
-IsAnswered property is applicable when we want to check whether the question containing image/media is answered. In the case of image/media questions, we cannot use the condition on the Value property as its value is undefined even if it's answered. In this specific use case, we have to use the IsAswered property.
+The '''IsAnswered''' property of the '''MobileCRM.UI.QuestionnaireForm.Question''' object allows for checking if a question in a questionnaire form has been answered.
 In practice, the '''MobileCRM.UI.QuestionnaireForm.onChange''' method is used to listen for changes within the form. If the "imagemedia" question is changed and detected as answered, it triggers predefined custom logic for further action: