Resco JavaScript Bridge: Difference between revisions

Jump to navigation Jump to search

Resco JavaScript Bridge (view source)

Revision as of 15:28, 25 February 2020

6,248 bytes added ,  25 February 2020
→‎Questionnaire
Line 1,360: Line 1,360:
== Questionnaire ==
== Questionnaire ==


Use [[Woodford]] to add offline HTML content to questionnaires. See [[Offline_HTML#Managing_offline_HTML_content|Managing offline HTML content]] for more information.


Use [[Questionnaire Designer]] to assign files to questionnaires. Edit a questionnaire template, select the top-level element of the questionnaire, and on the '''Properties''' pane, link to the file in the property '''Script Path'''. For offline files, use the <code>file://</code> prefix, for example: <code>file://test_questionnaire.html</code>.


=== How to write scripts for the questionnaire by using JSBridge API ===


The questionnaire form contains properties and methods to access and manipulate questions and question groups. The basic handlers like onSave, onChange are implemented as well.
In this section, we explain some basic operations. The object what we use can be found on this reference page:
* Basic questionnaire form object: https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_QuestionnaireForm
* Questionnaire group: https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_QuestionnaireForm_Group
* Question: https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_QuestionnaireForm_Question
Methods can be found in the section with '''Functions'''.
==== Basic handlers (onSave, onChange, and requestObject, i.e. onLoad) ====
This example demonstrates how to access the data on the questionnaire form and set the property of groups and questions.
<syntaxhighlight lang='js'>
MobileCRM.UI.QuestionnaireForm.requestObject(function (qForm) {
   /// <param name='qForm' type='MobileCRM.UI.QuestionnaireForm' />
   /// Get the target questionnaire entity of the form.
   var target = qForm.relationship.target;
   var escape1_group = qForm.findGroupByName("escape-routes-and-exits");
   /// Disable group if exist
   if (escape1_group) {
      escape1_group.isEnabled = false;
   }
   var extinquisher_qeustion = qForm.findQuestionById("9e4a9763-aa5d-4dd2-80aa-6dc940e388cf");
   if (extinquisher_qeustion) {
      extinquisher_qeustion.label = "New label set using JSBridge api";
   }
   var city_question = qForm.findQuestionByName("city");
   if (city_question) {
      /// set the description value of the question during onload
      city_question.description = "If city will not be valid, error message will be set";
   }
   /// base form object of questionnaire
   var f = qForm.form;
}, MobileCRM.bridge.alert, null);
</syntaxhighlight>
As we can see from the code above, we can request the main object of the questionnaire form. It works the same as on another entity form or entity list.
We can get the reference to the parent entity that opens the questionnaire. It can be used in the case when the regarding entity must refer to a parent.
The next part contains the method to access groups and questions directly by their name or ID.
References:
* https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_QuestionnaireForm_findQuestionById
* https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_QuestionnaireForm_findGroupByName
* https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_QuestionnaireForm_findQuestionByName
If we get the group, we can set the property of this object. In our case, we disable the whole group. You can set the visibility of the group as well. We can set these properties also on the question if it's available. We changed the description. In the application, it looks like this.
[[File:JSBridge Guide 040.png|600px]]
==== Work with handlers ====
A simple onChange handler sets an error message and validation on specific question.
<syntaxhighlight lang='js'>
MobileCRM.UI.QuestionnaireForm.onChange(function (qForm) {
   /// <param name='qForm' type='MobileCRM.UI.QuestionnaireForm' />
   if (qForm.context !== undefined) {
      var changedItem = qForm.context.changedItem;
      var changeItem_newValue = qForm.context.newValue;
      var qName = "are-all-emergency-light-indicators-illuminated-if-present";
      if (changedItem === qName && changeItem_newValue === false) {
         var emergency_question = qForm.findQuestionByName(qName);
         if (emergency_question !== null) {
            /// set validation and error message
            emergency_question.errorMessage = "Emergency light can't be illuminated";
            emergency_question.validate = true;
         }
      }
   }
}, true, null);
</syntaxhighlight>
An important part of the code is in the second and third lines. They show how to access the changed item. Anytime a question changes, this handler triggers. Therefore, it is good to know how to determine what question has been changed.
The last part shows how to set the property validation and custom error message for the changed item, if the value was set to false. In the application, it looks like this.
The error message is displayed when a user attempts to close the form.
[[File:JSBridge Guide 041.png|600px]]
==== OnSave event ====
The final example shows how to handle the onSave event. It cancels validation and discards the error message if the value of the question is correct.
<syntaxhighlight lang='js'>
MobileCRM.UI.QuestionnaireForm.onSave(function (qForm) {
   /// <param name='qForm' type='MobileCRM.UI.QuestionnaireForm' />
   var qName = "are-all-emergency-light-indicators-illuminated-if-present";
   var emergency_question = qForm.findQuestionByName(qName);
   if (emergency_question.validate) {
      if (emergency_question.value === true)
         emergency_question.errorMessage = undefined; // disable error message
      else
         qForm.cancelValidation("Emergency light can't be illuminated");
      }
   return true;
}, true, null); </syntaxhighlight>
== UI (Home) replacement ==
<syntaxhighlight lang='js'>
</syntaxhighlight>


<syntaxhighlight lang='js'>
<syntaxhighlight lang='js'>
</syntaxhighlight>
</syntaxhighlight>
Retrieved from "https://docs.resco.net/wiki/Special:MobileDiff/2074"

Navigation menu