Join the Power Platform Masterclass #2 starting April 23

Images: Difference between revisions

Jump to navigation Jump to search

Images (view source)

Revision as of 09:58, 21 July 2021

4,018 bytes removed ,  21 July 2021
m
fix blog link
m (fix blog link)
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Branding TOC}}
{{Branding TOC}}
[[Resco Mobile CRM]] offers several ways how to work with images. Broadly speaking, there are two large groups of images:
[[Resco Mobile CRM]] offers several ways how to work with images. Broadly speaking, there are two large groups of images:
* '''Entity images''' are related to a particular record in your database, such as the photos of your contacts, signatures on an order, or photos of broken machinery collected during an inspection.
* '''Dynamic images''' are related to a particular record in your database, such as the photos of your contacts, signatures on an order, or photos of broken machinery collected during an inspection.
* '''Project images''' are related to your [[app projects|app project]]. They include icons and other static images used in your app.
* '''Project images''' are related to your [[app projects|app project]]. They include icons and other static images used in your app.


Entity images can be stored in two locations:
Dynamic images can be stored in two locations:
* On your backend server, in special entities designed to hold binary documents, for example, annotation/note on Dynamics/Resco Cloud, or sf_contentversion or sf_attachment on Salesforce.
* On your backend server, in special entities designed to hold binary documents, for example, annotation/note on Dynamics/Resco Cloud, or sf_contentversion or sf_attachment on Salesforce.
* On external document storage, such as SharePoint. Use external document storage for images related to your organization entities and records, if you don’t want to use server database for these, for example, for cost reasons (storing documents in external document servers is cheaper than storing them directly in the CRM server), or you already have existing external storage that you don’t want to migrate. See [[Documents]] for more information.
* On external document storage, such as SharePoint. Use external document storage for images related to your organization entities and records, if you don’t want to use server database for these, for example, for cost reasons (storing documents in external document servers is cheaper than storing them directly in the CRM server), or you already have existing external storage that you don’t want to migrate. See [[Documents]] for more information.
Line 16: Line 16:
To improve how the [[Resco Mobile CRM]] app aligns with your company colors and graphics, or simply to spice up the app a little bit, you can change the images and icons in the app. You can also add new images for custom items, such as map pins, entity icons, form tabs icons, command icons, etc.
To improve how the [[Resco Mobile CRM]] app aligns with your company colors and graphics, or simply to spice up the app a little bit, you can change the images and icons in the app. You can also add new images for custom items, such as map pins, entity icons, form tabs icons, command icons, etc.


Edit an [[app projects|app project]] and select '''Images''' from the '''Project''' menu of [[Woodford]] to get started.
Edit an [[app projects|app project]] and select '''Images''' from the '''Project''' menu of [[Woodford]] to get started.  See [[Image examples]] for a more detailed description of a few frequent use cases.
 
=== Form and home icons ===
 
The modern and recommended way of changing home screen icons and form tab icons is to use the icon gallery, available directly in these UI components.
* [[Home_screen#Change_icons|Home screen icons]]
* [[Form#Form_tab_icons|Form tab icons]]
 
The older, traditional way of working with images is described below.


=== Working with images ===
=== Working with images ===
Line 53: Line 61:


If you want to use your picture in the same way as default pictures are used (i.e. picture follows color selected in the theme or view style) you need to enable the Colorize option. It will create a mask from the picture that you add. The picture needs to have an alpha channel. Everything where alpha is different from 0, will be used as a mask and it will follow the color set in theme or view style.
If you want to use your picture in the same way as default pictures are used (i.e. picture follows color selected in the theme or view style) you need to enable the Colorize option. It will create a mask from the picture that you add. The picture needs to have an alpha channel. Everything where alpha is different from 0, will be used as a mask and it will follow the color set in theme or view style.
To use transparency and colorization, use 32-bit PNG files with transparency.


=== Bulk changes ===
=== Bulk changes ===


Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure. To ensure that you have the folders right, you can start with the existing icons:
Bulk import is done by importing a specifically named zip file that contains the images in a specific folder structure. To ensure that you have the folders right, you can start with the existing icons:
* either, download a [https://www.resco.net/downloads/MobileCRM.zip zip file with all images] from Resco web
* either download a [https://www.resco.net/downloads/MobileCRM.zip zip file with the default icons] from Resco web
* or, export all custom icons from a Woodford project: Edit an app project, select '''Design > Images''' from the '''Project''' menu and click '''Export'''.
* or export all custom icons from a Woodford project: Edit an app project, select '''Design > Images''' from the '''Project''' menu and click '''Export'''.
: Tip: Export the icons from an inspections project, it contains many custom icons.
: Tip: Export the icons from an inspections project, it contains many custom icons.


Line 115: Line 125:
|}
|}


=== Configurable on/off images on a form ===
== Dynamic images ==
 
When you add a parameter of the type "two options" to a [[Form]] (for example, Yes/No or On/Off), by default, it is displayed in the app as a switch:
 
[[File:Two options on a form.png]]
 
You can add custom project images and a new style to your project to display it as a checkbox instead:
 
[[File:Two options on a form-checkbox.png]]
 
Here's how:
# Select '''Design > Images''' from the '''Project''' menu.
# Add a new directory, for example "Checkbox".
# Add two images to the directory, with the names 0 and 1, then click '''Save'''.<br>[[File:Two images in the checkbox directory.png|600px]]
# Edit the [[form]] of an entity that has a suitable parameter of the type "two options", for example the Account entity.
# Click '''Edit Styles''' and add a new style.
# As '''ImageBasePath''' enter the directory to your checkbox images, then click '''Save & Close'''.<br>[[File:New checkbox style.png]]
# Add the parameter "Do not allow E-mails" to your form and on the Properties pane, set '''Style''' to "Checkbox".<br>[[File:Set style to checkbox.png|600px]]
 
== Entity images ==


When designing a custom [[view]] or [[form]], you can display images related to your record.
When designing a custom [[view]] or [[form]], you can display images related to your record. See [[Image examples]] for a more detailed description of a few frequent use cases.


* To learn more about what view and form images represent in Dynamics, please check this [http://blog.resco.net/2014/06/23/data-images-simply-explained/ blog post]. {{Badge|Blog}}
* To learn more about what view and form images represent in Dynamics, please check this [https://www.resco.net/blog/data-images-simply-explained/ blog post]. {{Badge|Blog}}
* See also an example of Woodford setup for view and form images in this [http://blog.resco.net/2014/06/23/data-images-setup/ blog post]. {{Badge|Blog}}
* See also an example of Woodford setup for view and form images in this [https://www.resco.net/blog/data-images-setup/ blog post]. {{Badge|Blog}}


=== Use Note attachment as image in views ===
=== Use Note attachment as image in views ===
Line 145: Line 136:
You add pictures that were originally saved as Note attachments to the view and/or to an edit form. This way you can, for example, show the photo of your contact or a picture of your product in the app's forms and views.
You add pictures that were originally saved as Note attachments to the view and/or to an edit form. This way you can, for example, show the photo of your contact or a picture of your product in the app's forms and views.


To display pictures on a view, you need to do following:
To display pictures on a view, you need to do the following:


# Edit an app project and select the entity from the '''Project''' menu.
# Edit an app project and select the entity from the '''Project''' menu.
Line 162: Line 153:
If you use multiple ListNoteImage styles, you should make sure to set the correct style in the properties of the image item back in the view designer window.
If you use multiple ListNoteImage styles, you should make sure to set the correct style in the properties of the image item back in the view designer window.


Now, you need to save these changes, publish the mobile project and synchronize the Mobile CRM application. Then open any Account record in the app, create an associated Note with Subject “ListImage” and attach/capture a picture. This picture is used in the list for this record.
Now, you need to save these changes, publish the mobile project, and synchronize the Mobile CRM application. Then open any Account record in the app, create an associated Note with Subject “ListImage” and attach/capture a picture. This picture is used in the list for this record.
 
=== Default / editable images in views ===
 
If you use images in views, and there are some records that do not have any image in their Note, you can display a default (placeholder) image instead, so that there is not an empty slot in the view. The placeholder is configured in image styles.
# Edit a view.
# Click '''Edit Styles''' to open the [[Style editor]].
# Select an image style and click the '''[[ImageQuery]]''' parameter.<br>[[File:Configure image query.png]]
# In the '''Placeholder Image''' field, enter the file name of the file, including folder, separated by dots.
# Click OK to close the image query. Save and close the style editor. Save the view.
# Select '''Images''' from the '''Project''' menu.
# Click '''Add Directory''' to create the folder ''myfolder'' from the example above.
# Add the file ''mypic.png'' into the folder.
# Click '''Save'''.
# Publish the project and verify the behavior in the app.
 
Also, it is possible to set editable images in views. It does not mean that you can edit the image, but you can edit the field, that is represented by it. For example, an option set may be displayed as image, rather than its value as text. And similarly to editable fields, you can change the value with the images.
 
To find out how to set up these two features, please check this webinar [https://youtu.be/9vL4QRN_1dk?t=607 section]. {{Badge|Webinar}}


=== Use Note attachment as image in forms ===
=== Use Note attachment as image in forms ===
Line 197: Line 170:


{{Note|If you set the same Note Subject for your view and form, the same image attached to a simple Note will be used for both.}}
{{Note|If you set the same Note Subject for your view and form, the same image attached to a simple Note will be used for both.}}
=== Crop or edit images in forms ===
In some scenarios, you need to select only a portion of the image, highlight a part of the image, or add some text. You don't have to use an external image editor, you can do this directly in the app.
In Woodford, when you select an image field on a form tab, the '''Properties''' pane lists a number of actions, such as '''Resize Image''' or '''Clear''' (see [[Form#Image_Actions|full list]]).
The actions that you enable can then be used in the app, for example:
* when you click the image placeholder to add an image
* when you click an image on the form
* when you view an image, from the hamburger menu
* when you select the '''Edit image''' option, you can crop the image, rotate it, add lines and text.
<gallery mode="packed" heights=250px>
File:Placeholder actions.png
File:Onclick actions.png
File:Onview actions.png
File:Image editor.png
</gallery>
=== Automatic image processing ===
In some scenarios, you need to ingest large number images from various sources, and you would like to perform some image normalization automatically, for example, decrease image dimensions or crop image to a certain aspect ratio. This option is available for images added using the '''[[Form#Add_media|Add Media]]''' button or using the photo or plus button on a related list. In the following example, we add a new media tab and write an On Load rule that performs the normalization.
# Edit an [[app projects|app project]], then select an entity from the '''Project''' menu, for example, Contact.
# Click '''Add Media''' to add a new tab to your form, then click '''OK'''. <br>[[File:Configure media tab.png]]
# Click '''On Load''' and specify the rule that should be performed.<br>[[File:On Load rule.png]]
# Select one of the enforcement modes: '''No Enforcement''' means that images are not modified; options starting with '''Auto''' perform the action autonomously; '''Crop in Image Editor''' launches an in-app editor that allows the user to crop the image manually.
# Click '''Save & Close''' to return to the form designer, then save the form and publish the project.
{{Note|You can configure this rule for the form of the Note (Annotation) entity. This form includes a hidden media tab called ''Attachment''; i.e., the rule will point to ''Tabs.Attachment.EnforcementMode''.|Tip}}


=== Entity image (Dynamics) ===
=== Entity image (Dynamics) ===
Line 241: Line 184:


When changes are saved, the project needs to be published and synchronized with the Mobile CRM app. Entity images will appear on the view and on the edit form for those records that have an entity image.
When changes are saved, the project needs to be published and synchronized with the Mobile CRM app. Entity images will appear on the view and on the edit form for those records that have an entity image.
The maximum size of the image is 144x144 pixels. <sup>[https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/image-attributes#uploading-image-data [docs.microsoft.com]]</sup>


=== Change filename of note images ===
=== Change filename of note images ===
Retrieved from "https://docs.resco.net/wiki/Special:MobileDiff/3340...5205"

Navigation menu