JSBridge examples: Difference between revisions
No edit summary |
|||
| Line 2: | Line 2: | ||
== MessageBox too short - text gets cut off == | == 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 '''[https://github.com/Resconet/JSBridge/wiki/MobileCRM.Configuration 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. | |||
<syntaxhighlight lang='js'> | <syntaxhighlight lang='js'> | ||
function showAlert() { | function showAlert() { | ||
| Line 19: | Line 21: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== 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. | |||
<syntaxhighlight lang='js'> | <syntaxhighlight lang='js'> | ||
| Line 48: | Line 51: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
[[File:Modal iFrame.png|600px]] | [[File:Modal iFrame.png|600px|alt=larger messagebox alternative in an iframe]] | ||
==Is the question answered? - IsAnswered property== | ==Is the question answered? - IsAnswered property== | ||
Revision as of 12:04, 12 March 2024
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.