{"id":5808,"date":"2017-06-05T17:38:00","date_gmt":"2017-06-05T12:08:00","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=5808"},"modified":"2017-06-05T17:38:00","modified_gmt":"2017-06-05T12:08:00","slug":"clickable-image-in-view-on-the-resco-mobile-crm-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2017\/06\/clickable-image-in-view-on-the-resco-mobile-crm-app\/","title":{"rendered":"Clickable Image in View on the Resco Mobile CRM App"},"content":{"rendered":"

Introduction:<\/strong><\/h4>\n

We had a requirement where we wanted to add a view that will list out all the Work Order Incidents on the Resco Mobile CRM app. We also wanted to add clickable images to this view to allow the user to mark Work Order Incidents as resolved or unresolved through a visual guide.<\/p>\n

To mark Work Order Incidents as resolved<\/em><\/strong>, we wanted to use:<\/p>\n

\"Resco<\/p>\n

and to mark it as unresolved<\/em><\/strong>, we wanted to use:<\/p>\n

\"Resco<\/a><\/p>\n

In this blog, we will guide you through the steps required to achieve this with the Resco Mobile CRM app.<\/p>\n

Steps to add clickable images in a view on the Resco Mobile CRM app:<\/strong><\/h4>\n

1<\/strong>. First and foremost, we need to add these two images in the Resco Mobile Project. To know how to add an image in the Mobile Project, refer this link<\/a>.<\/p>\n

\n

Note: Make sure that while adding images in the Mobile Project, the name of the image is same as the field value (text value). In this case, we want to utilize the images for the field \u2018Incident Resolved\u2019. This field is a two option field and has text value as \u2018Yes\u2019 and \u2018No\u2019. So we will name the images as \u2018Yes\u2019 and \u2018No\u2019.<\/em><\/strong><\/p>\n<\/blockquote>\n

\u00a0<\/em>2.\u00a0<\/em><\/strong>Once you have added the required images in the Mobile Project, next step is to create a view.<\/p>\n

To create a view, go to \u2018Work Order Incident\u2019<\/em><\/strong> entity and click on \u2018Views\u2019<\/em><\/strong> as shown in the screenshot below;<\/p>\n

\"Resco<\/a><\/p>\n

\u00a0Once you have added the view, open that view and select the fields that you require.<\/p>\n

3<\/strong>. Now the next step is to add new Styles<\/em><\/strong> that are needed to show the editable image in the view, to add new Styles please follow the steps mentioned below;<\/p>\n

a<\/strong>. Open the newly created View and click on the \u2018Edit Styles\u2019<\/em><\/strong> as shown in the screenshot below;<\/p>\n

\"Resco<\/a><\/p>\n

b<\/strong>. Once you click on \u2018Edit Styles\u2019<\/em><\/strong>, the \u2018Application Global Style Manager\u2019<\/em><\/strong> window will open next. Select the \u2018ImageCellStyle\u2019<\/em><\/strong> and click on \u2018Add\u2019<\/em><\/strong> as shown in the screenshot below;<\/p>\n

\"Resco<\/a><\/p>\n

c<\/strong>. Now add the name of the style, in this case, we have named it as \u2018Resolved\u2019<\/em><\/strong>. In the \u2018FormatString\u2019<\/em><\/strong> field you need to select the Directory to which you have added the image as shown in the screenshot below;<\/p>\n

\"Resco<\/a><\/p>\n

In this case, the \u2018FormatString\u2019<\/em><\/strong> is \u2018Resolved.{0}.png\u2019.<\/em><\/strong><\/p>\n

Here, \u2018Resolved\u2019<\/em><\/strong> is the Directory name where the image is stored, \u2018{0}\u2019<\/em><\/strong> is the field text value i.e. \u2018Yes\u2019<\/em><\/strong> or \u2018No\u2019<\/em><\/strong>, and \u2018.png\u2019<\/em><\/strong> is the image file extension.<\/p>\n

4<\/strong>. After creating\u00a0\u2018Styles\u2019<\/em><\/strong> the next step is to add the image in the view. Click on \u2018Add Image\u2019<\/em><\/strong> on the View form. As you can see in the screenshot below, the image control is added in the View. Here you can arrange the position of the image in the View.<\/p>\n

\"Resco<\/a><\/p>\n

\"Resco<\/a><\/p>\n

5<\/strong>. Now click on the image control and select the field for which you want to show the image.<\/p>\n

6<\/strong>. The final step is to set the property of the image control added in the view. Here, set the \u2018Kind\u2019<\/em><\/strong> as \u2018Image-Click\u2019<\/em><\/strong> and \u2018Style\u2019<\/em><\/strong> as \u2018Resolved\u2019<\/em><\/strong> as seen in the screenshot below;<\/p>\n

\"Resco<\/a><\/p>\n

7<\/strong>. Save the changes and publish the project. Once the project is published, open the project on your Mobile. Open the Work Order you can now see the clickable images that we have added in the \u2018Incidents\u2019<\/em><\/strong> view instead of \u2018Yes\u2019<\/em><\/strong> and \u2018No\u2019<\/em><\/strong> as seen in the screenshot below;<\/p>\n

\"Resco<\/a><\/p>\n

Conclusion:<\/h4>\n

Clickable images in the View on the Resco Mobile CRM app gives the users a pictorial representation of the data and helps improve the end user experience.<\/p>\n

\"QuickBooks<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction: We had a requirement where we wanted to add a view that will list out all the Work Order Incidents on the Resco Mobile CRM app. We also wanted to add clickable images to this view to allow the user to mark Work Order Incidents as resolved or unresolved through a visual guide. To\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":5813,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,48],"tags":[1447,1450],"class_list":["post-5808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-resco-mobile-crm","tag-resco-mobile-crm","tag-resco-mobile-dynamics-crm-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/5808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=5808"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/5808\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/5813"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=5808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=5808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=5808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}