JSBridge examples: Difference between revisions

Revision as of 11:50, 19 March 2024

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

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

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 displaying 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 the MobileCRM.Configuration object 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 messageText) is passed to it, overcoming MessageBox's text capacity limitation.

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

After the JavaScript function, we define the HTML document to be loaded in the iframe. 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. In this example, we divide the input text 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? - IsAnswered 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.

Dynamicaly load an image from an annotation and use it as an answer

This script dynamically loads an image from an annotation related to the record in the regarding lookup question. When the resco_regardingid field changes, indicating a new or different entity (such as an asset, account, or contact), the script automatically fetches the associated annotation that contains an image. This image is then set as the answer to a designated image question within the form. In this example, we load an image from the annotation related to the contact.

OnChange listener and function handleRegardIdChange

We use MobileCRM.UI.QuestionnaireForm.onChange function as a listener for a change in the resco_regarding field and call the handleRegardIdChange function. In this function, we assign the record ID from resco_regardingid to the regardingid variable and call clearImageAnswerIfPresent and fetchAnnotationAndSetImage functions.

MobileCRM.UI.QuestionnaireForm.onChange(function(qForm) {
    var context = qForm.context;
    if (context.changedItem == "resco_regardingid") {
        handleRegardIdChange(qForm);
    }
}, true, null);

function handleRegardIdChange(qForm) {
    var regardingid = qForm.questionnaire.properties.resco_regardingid;
    clearImageAnswerIfPresent(qForm);
    fetchAnnotationAndSetImage(regardingid);
}

function clearImageAnswerIfPresent

This function checks whether the imagemedia question is answered (contains image). If it is, it uses MobileCRM.UI.QuestionnaireForm.trySetImageAnswer method with null parameters to delete the image.

function clearImageAnswerIfPresent(qForm) {
    var imageQuestion = qForm.findQuestionByName("imagemedia");
    if (imageQuestion && imageQuestion.isAnswered === true) {
        MobileCRM.UI.QuestionnaireForm.trySetImageAnswer("imagemedia", null, null, function(errorMsg) {
            if (errorMsg) {
                MobileCRM.bridge.alert("Error setting image: " + errorMsg);
            } else {
                console.log("Image deleted successfully.");
            }
        });
    }
}

function fetchAnnotationAndSetImage

This function fetches the annotation related to the regarding entity and calls loadDocumentAndSetImage.

function fetchAnnotationAndSetImage(regardingid) {
    var fetchEntity = new MobileCRM.FetchXml.Entity("annotation");
    fetchEntity.addAttributes();
    var filter = new MobileCRM.FetchXml.Filter();
    filter.type = "and";
    var cond1 = new MobileCRM.FetchXml.Condition();
    cond1.attribute = "objectid";
    cond1.operator = "eq";
    cond1.value = regardingid;
    filter.conditions.push(cond1);
    fetchEntity.filter = filter;

    var fetch = new MobileCRM.FetchXml.Fetch(fetchEntity);
    fetch.executeAsync("DynamicEntities").then(function(result) {
        if (result.length < 1) {
            MobileCRM.bridge.alert("No images related.");
        } else {
            var annotation = result[0];
            var annotationid = annotation.id;
            var mimetype = annotation.properties.mimetype;
            loadDocumentAndSetImage(annotationid, mimetype);
        }
    }, function(error) {
        MobileCRM.bridge.alert("Fetch failed: " + error);
    });
}

function loadDocumentAndSetImage

This function uses MobileCRM.DynamicEntity.loadDocumentBody method to load documentbody from the annotation. We use this method as we cannot fetch documentbody in the offline mode. This way, the script can work both online and offline. Right after, we use the MobileCRM.UI.QuestionnaireForm.trySetImageAnswer method to load the image into the question.

function loadDocumentAndSetImage(annotationid, mimetype) {
    MobileCRM.DynamicEntity.loadDocumentBody("annotation", annotationid, function(base64str) {
        MobileCRM.UI.QuestionnaireForm.trySetImageAnswer("imagemedia", base64str, mimetype, function(errorMsg) {
            if (errorMsg) {
                MobileCRM.bridge.alert("Error setting image: " + errorMsg);
            } else {
                console.log("Image set successfully.");
            }
        });
    }, function(error) {
        MobileCRM.bridge.alert("Error loading document: " + error);
    });
}

{{#CI form: title = Was this information helpful? How can we improve? | type = inputs | [textarea] }}

@@ Line 77: / Line 77: @@
 This script dynamically loads an image from an annotation related to the record in the regarding lookup question. When the resco_regardingid field changes, indicating a new or different entity (such as an asset, account, or contact), the script automatically fetches the associated annotation that contains an image. This image is then set as the answer to a designated image question within the form. In this example, we load an image from the annotation related to the contact.
-;OnChange listener and function handleRegardIdChange:
+;OnChange listener and function handleRegardIdChange
 We use '''MobileCRM.UI.QuestionnaireForm.onChange''' function as a listener for a change in the resco_regarding field and call the handleRegardIdChange function. In this function, we assign the record ID from resco_regardingid to the regardingid variable and call clearImageAnswerIfPresent and fetchAnnotationAndSetImage functions.
@@ Line 95: / Line 95: @@
 </syntaxhighlight>
-;function clearImageAnswerIfPresent:
+;function clearImageAnswerIfPresent
 This function checks whether the imagemedia question is answered (contains image). If it is, it uses '''MobileCRM.UI.QuestionnaireForm.trySetImageAnswer''' method with null parameters to delete the image.
@@ Line 113: / Line 113: @@
 </syntaxhighlight>
-;function fetchAnnotationAndSetImage:
+;function fetchAnnotationAndSetImage
 This function fetches the annotation related to the regarding entity and calls loadDocumentAndSetImage.
@@ Line 145: / Line 145: @@
 </syntaxhighlight>
-;function loadDocumentAndSetImage:
+;function loadDocumentAndSetImage
 This function uses '''MobileCRM.DynamicEntity.loadDocumentBody''' method to load documentbody from the annotation. We use this method as we cannot fetch documentbody in the offline mode. This way, the script can work both online and offline. Right after, we use the '''MobileCRM.UI.QuestionnaireForm.trySetImageAnswer''' method to load the image into the question.