Guide : Shape my datas - Visual indicators
VISUAL INDICATORS
Based on dropdown field, the visual indicators allows you the advantage of being immediately identifiable and show easily the key elements.
The principle consists in associating a drop-down list value with a differentiating visual:
By example with an Accounts list view on Type columns. And a custom one
Example with a coloring of a drop-down list:
The display is also done on the record layout :
Important : The customizations need to modify CSS files, a removal of browser‘s caches may be necessary during changes in images (create / edit / delete).
SETTINGS SCREEN
In the Administration at the Studio level, go to the menu of the Shape my Sugar module named « Shape my Dropdown Lists ».
This list is used to administer all the visual customizations of the application's lists.
POSSIBLE CUSTOMIZATIONS Two display customizations are possible: in images or in colors.
Example with an image:
Example with a color:
ADDING A NEW VISUAL
The creation of a visual customization is done by creating an entry in the menu « dress up the drop-down lists ».
The values to be entered are:
- The module concerned
- The module field
- The value to which the display is applied
- The navigation language (different customizations possible)
- The type of display
Exemple :
BACKGROUND COLOR (CSS)
This option lets you choose a background color that will be displayed behind the list value. The choice is made from the list of those available.
Example :
Display :
SPECIFIC CLASSE(S) (CSS)
This option allows you to fill in an existing CSS class in Sugar that will be applied to the list value. To do this, you must enter the names to be applied.
Example :
Display :
IMAGE (UPLOAD FILE)
This option allows you to choose an image that will be applied instead of the list value. Just select the image to send, the style is customizable and is by default set to 30 pixels in height.
Example :
Display :
IMAGE BESIDE TEXT (UPLOAD FILE)
This option allows you to choose an image that will be applied next to the list value. Just select the image to send, the style is customizable and is by default set to 30 pixels in height.
Example :
Display :
IMAGE (LINK OF IMAGE FILE)
This option is similar in its rendering to the option to send an image, namely to choose an image which will be applied next to the value of the list. The difference here is that the image is not hosted on Sugar but displayed via a URL, the style is customizable and is by default set to 30 pixels in height.
Example :
Display :
IMAGE BESIDE TEXT (LINK OF IMAGE FILE)
This option is similar in its rendering to the option to send an image with the list value text displayed next to it. The difference here is that the image is not hosted on Sugar but displayed via a URL, the style is customizable and is by default set to 30 pixels in height.
Example :
Display :
ICONS
It is possible to find icons for free on the site https://icones8.fr