{"id":24130,"date":"2020-07-16T11:52:57","date_gmt":"2020-07-16T11:52:57","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=24130"},"modified":"2020-07-16T11:52:57","modified_gmt":"2020-07-16T11:52:57","slug":"how-to-add-loader-on-screen-in-resco-mobile-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-add-loader-on-screen-in-resco-mobile-app\/","title":{"rendered":"How to add loader on screen in Resco Mobile App"},"content":{"rendered":"

Introduction<\/h2>\n

While working with the script (using JSbridge<\/strong> reference) in Resco Mobile App<\/strong>, sometimes it takes more time to perform the operation since the process is async in the Resco Mobile app. If we want to hold the screen till the completion of process, we need to add loader or processing bar on the page which gives an idea to the user\/technician that the operation is in progress and user\/technician needs to wait on the page.<\/p>\n

Because if the user\/technician navigates to another page before completion of the script in the background then it might break the functionality in between.<\/p>\n

In Resco<\/strong> there is showPleaseWait<\/strong> function which will freeze the screen until the process is completed.<\/p>\n

For example, in update of \u2018Main Phone\u2019 on Account<\/strong> form we want to update related Contact\u2019s \u2018Business Phone\u2019 same as \u2018Main Phone\u2019. There can be several Contacts<\/strong> related to the Account<\/strong> and since the process is async, it takes time to update the \u2018Business Phone\u2019 of related Contacts<\/strong>. So, using showPleaseWait<\/strong> JSBridge function, we can add loader until the process execution completes.<\/p>\n

Please refer below code for the same:<\/p>\n

function onLoad() {<\/p>\n

var functionName = “onLoad(): “;<\/p>\n

try {<\/p>\n

MobileCRM.UI.EntityForm.onChange(function (entityForm) {<\/p>\n

var changedItem = entityForm.context.changedItem;<\/p>\n

\/\/validate the changed item<\/p>\n

if (changedItem == “telephone1”) {<\/p>\n

var accountId = entityForm.entity.id;<\/p>\n

var telephone1 = entityForm.entity.properties.telephone1;<\/p>\n

if (!isValid(telephone1))<\/p>\n

return;<\/p>\n

var wait = MobileCRM.UI.EntityForm.showPleaseWait(“Please wait…”);<\/p>\n

\/\/Entity Contact<\/p>\n

var entity = new MobileCRM.FetchXml.Entity(“contact”);<\/p>\n

entity.addAttribute(“contactid”);<\/p>\n

entity.filter = new MobileCRM.FetchXml.Filter();<\/p>\n

entity.filter.where(“parentcustomerid”, “eq”, accountId);<\/p>\n

entity.filter.where(“statecode”, “eq”, 0);<\/p>\n

\/\/ Get the Contact Records related to the Account.<\/p>\n

var fetch = new MobileCRM.FetchXml.Fetch(entity);<\/p>\n

fetch.execute(“Array”, function (results) {<\/p>\n

\/\/Validate Results<\/p>\n

if (isValid(results) && results.length > 0) {<\/p>\n

var count = results.length;<\/p>\n

\/\/MobileCRM.bridge.alert(count + ” count”);<\/p>\n

for (var i = 0; i < results.length; i++) {<\/p>\n

var contact = results[i];<\/p>\n

var contactId = contact[0];<\/p>\n

var enContact = new MobileCRM.DynamicEntity(“contact”, contactId);<\/p>\n

enContact.properties.telephone1 = telephone1;\u00a0 \/\/Business Phone<\/p>\n

\/\/Update Contact record<\/p>\n

enContact.save(<\/p>\n

function (error) {<\/p>\n

if (error) {<\/p>\n

wait.close(); \/\/ It is used to close the wait dialog<\/p>\n

MobileCRM.bridge.alert(functionName + ” >> ” + error);<\/p>\n

}<\/p>\n

else {<\/p>\n

count–;<\/p>\n

if (count <= 0)<\/p>\n

wait.close(); \/\/ It is used to close the wait dialog<\/p>\n

}<\/p>\n

});<\/p>\n

}<\/p>\n

}<\/p>\n

else {<\/p>\n

wait.close();<\/p>\n

}<\/p>\n

},<\/p>\n

function (err) {<\/p>\n

MobileCRM.bridge.alert(functionName + ” >> ” + err);<\/p>\n

});<\/p>\n

}<\/p>\n

});<\/p>\n

} catch (e) {<\/p>\n

MobileCRM.bridge.alert(functionName + ” >> ” + err);<\/p>\n

}<\/p>\n

}<\/p>\n

After deploying the script on Resco Mobile App<\/strong>, when the user\/technician will open an Account<\/strong> record and update \u2018Main Phone\u2019 (i.e. telelphone1), the please wait dialog<\/strong> will be displayed till the completion of process as shown in the below screenshot:<\/p>\n

\"Resco<\/p>\n

Conclusion<\/strong><\/h2>\n

In this way, by using the showPleaseWait<\/strong> JSBridge function we can add the loader on screen until the process is completed in Mobile App<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction While working with the script (using JSbridge reference) in Resco Mobile App, sometimes it takes more time to perform the operation since the process is async in the Resco Mobile app. If we want to hold the screen till the completion of process, we need to add loader or processing bar on the page\u2026 Read More: How to add loader on screen in Resco Mobile App »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":24133,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,48],"tags":[1445],"class_list":["post-24130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365-v9-2","category-resco-mobile-crm","tag-resco-mobile-app"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t