JSBridge examples
| Resco JavaScript Bridge |
|---|
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.
Load image from annotation, use it as 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 the 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 the 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 the 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);
});
}