10,729
edits
Important: Deprecating old WebView — Publish failed error
Resco JavaScript Bridge: Difference between revisions
Jump to navigation
Jump to search
→Global events
| Line 1,139: | Line 1,139: | ||
== Global events == | == Global events == | ||
References and objects what we use in this document as prerequisites | |||
;Raise global event | |||
:A method to raise a global event, which can have the listener bound by another iframe. | |||
:https://www.resco.net/javascript-bridge-reference/#MobileCRM_Bridge_raiseGlobalEvent | |||
<syntaxhighlight lang='js'> | ;Listen on a global event | ||
:A method that listens on a risen event from any iframe. | |||
:https://www.resco.net/javascript-bridge-reference/#MobileCRM.Bridge.onGlobalEvent | |||
Prerequisites objects are dependent on each other. They work as simple event listeners and handlers similar to other programming language Events logic. Each method requires the specified event name, handler, and a bind property. | |||
* From the name of the input method’s parameter, it is obvious that the event '''name''' represents the name of the event you raise or listen on. | |||
* A '''handler''' is a type of function, a callback in case of an event was fired or raised for listening. | |||
* '''Bind property''' meaning is the same as for another HTML/JavaScript event handlers. If you want to register events to listen to, you have to bind it. To unregister events, just set bind property to false. | |||
=== Events predefined in the application === | |||
[[Resco mobile apps]] contain many events, some of which can be handled by your custom HTML, JavaScript code. To listen on those events, you need to register an event listener with the specific event name. Here are the available pre-defined events of MobileCRM application: | |||
;EntityFormClosed | |||
:This event is triggered after an event form is closed. Remember that not every form is an entity form. We also have iFrame and HomeForm. | |||
:Object: https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_EntityForm | |||
:Sample scenario: We work on an account entity form, that contains an iframe bound with a listener on this method. After this event is registered, we can rely on the handler callback being triggered when any opened entityForm is closed. For our scenario, imagine that we opened some corresponding order entity form, edited this entity, and tapped on the close button. Suddenly, this handler will listen on it. | |||
;IFrameFormClosed | |||
:Event handler similar to the previous EntityFormClosed, the only difference is in the type of object. | |||
:Object: https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_IFrameForm | |||
;SyncStarted | |||
:For this event I will start with a scenario that suits this event the most. | |||
:Sample scenario: Since this event is triggering in various situations, most of time we want to handle it from the application start. In this special case, we have to register this event during an application opening. The question is: How to bind iframe with a handler to the homeForm? Answer: We have only one option, to place the HTML file to the first position of home items. If this happens, the application replaces the native UI with your custom HTML. | |||
:[[File:Ui replacement.png]] | |||
{{Note|You have to name this iframe only as UIReplacement or HomeReplacement. Other names of iframes and their content including the script part are ignored until you directly open them.}} | |||
:From this moment, when you publish the project and your customization didn’t contain iframe with this name, you will be asked to restart your application to apply UI Changes. At this moment we replace whole HomeForm UI with your HTML. In this situation, you will probably work with this object and your script will implement the whole logic to display/open/close items of the home screen. | |||
:Object: https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_HomeForm | |||
:Back to our example, we register handlers for SyncStarted event and hide the UI replacement to continue working with the native UI, for example like this: | |||
:<syntaxhighlight lang='js'> | |||
window.onload = function () { | |||
/// <summary>Method executed when all Html DOM components are loaded.</summary> | |||
init(); | |||
} | |||
function init() { | |||
MobileCRM.bridge.onGlobalEvent("SyncStarted", function (args) { | |||
/// <summary>Register event handler for pre-defined event.</summarry> | |||
/// <param name='args' type='Object'>Handler callback arguments.</param> | |||
MobileCRM.bridge.alert("Synced Started"); | |||
}, true, null); | |||
// hide UI Replacement | |||
MobileCRM.UI.HomeForm.hideUIReplacement(); | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
:From this moment, every time the synchronization starts, this alert is displayed. Of course, this is just one of many examples of how to use this predefined event. This just shows how to control the state of an application when the synchronization starts. This handler is not restricted for use on the home form only. You can use it on another iframe bound in available places like entity form, iFrameForm or entity list. | |||
;SyncFinished | |||
:A predefined event that works similarly to previous SyncStarted, except the state when it is triggered. We can rely on this event when a synchronization finishes. | |||
:The event handler callback carries an object as an argument that we can use to check the synchronization result. See in the following object and sample code: | |||
:Object: https://www.resco.net/javascript-bridge-reference/#MobileCRM_Services_SynchronizationResult | |||
<syntaxhighlight lang='js'> | <syntaxhighlight lang='js'> | ||
function onSyncFinished(bind) { | |||
MobileCRM.bridge.onGlobalEvent("SyncFinished", function (args) { | |||
var syncResult = new MobileCRM.Services.SynchronizationResult(args.lastSyncResult); | |||
if (syncResult.newCustomizationReady) | |||
MobileCRM.bridge.alert("New Customization ready."); | |||
else | |||
MobileCRM.bridge.alert("Not any new Customization ready."); | |||
}, bind, null); | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
:As in the previous handler, we are able to listen on this event anywhere from the bound iframe’s possible placing. | |||
:Sample scenario: Imagine that we create a record in the mobile app, but we want to be sure that while we did so, nothing new was added to the project, if customization was not changed already. So we will handle the saving event of this record with callback, which will invoke synchronization from our script. Since we have a listener for the global SyncFinished event, we will check if any new customization is not ready. Depending on our result we can continue or decline operations made on record. | |||
=== SyncFinished handler === | |||
In a specific scenario, your application requires to use UIReplacement and its sync finished event. We are talking about the case when your app has been synced and downloaded anew customization. In this case, a modal window appears ''Application was updated''. This scenario does not trigger the global event syncFinished, because this is a special event on home form. Look at the following code snippet that shows how to write this event. The implementation of this code is the same as with global syncFinished event. | |||
Reference: | |||
https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_HomeForm_onSyncFinished | |||
=== Custom global event === | |||
This section describes the custom event that we handle. The important method here is the same one as in the previous explanation. The only difference is the parameters we send. The name of the event is our custom event name that we trigger and listen on. Handlers contain the logic that we need to implement when the event triggers or was triggered. Arguments that the handlers carry can be a type of object, it could mean anything since you create and handle them by your logic. | |||
=== Unregister the events === | |||
In this case, when we don’t want to listen on this event, we have to call the same method, but the parameter bind must be set to false. This scenario can be described as += and -= in other programming languages. | |||
== Lookup == | |||
References and objects that are used for lookup creation: | |||
* '''LookUp Form''' – https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_LookupForm | |||
* '''Multi LookUp Form''' – https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_MultiLookupForm | |||
* '''DetailView Lookup link Item''' – https://www.resco.net/javascript-bridge-reference/#MobileCRM_UI_DetailViewItems_LookupSetup | |||
All the mentioned objects can be used for different approaches. Some of them are dependent on an object that holds reference and creates '''LookUp'''. That doesn’t mean you can’t call the other ones from those objects. | |||
=== Create view template for Lookup in Woodford === | |||
<syntaxhighlight lang='js'> | <syntaxhighlight lang='js'> | ||