Using a custom icon for workflow actions (How To)

From GeoMedia Smart Client
Jump to: navigation, search






GMSC 2014

Variant A: With Custom Theme

Create a new custom theme or use an existing one to define a new custom icon for your workflow actions.

Read Theme to learn more about the folder and file structure, the import and process order and the editable variables.
Read Creating a custom workflow theme (How To) if you want to create a new one.


Step A.1: FormAction image attribute

Edit the image attribute of your FormAction in your FormSettings (eg. image='custom-icon-like' see image attribute of FormAction)

...
<FormField name="FormField">
   <FormAction name="Action" action="SCRIPT[IG.notify('I Like').show()]" image="custom-icon-like" />
</FormField>
...




Step A.2: Custom content variable

Open your custom Theme folder and edit the variables-content.less file (see Theme folder and file structure).

Option 1: Use a sprite to load all icons at once (RECOMMENDED)
Option 2: Use a single 16x16pixel image-file to load one icon

A.2 Option 1: Use a sprite

Define a new less-variable with the correct icon positions of your sprite. If you don´t have any sprite, create a less-variable with the path to your sprite first.

...
//custom icons
@custom-icon-sprite:   url(img/custom-icon-sprite.png);
@custom-icon-like:     0px 0px;
...


A.2 Option 2: Use single image

Define a new less-variable with the path to your 16x16pixel image-file.

...
//custom icons
@custom-icon-like:     url(img/custom-icon-sprite.png);
...




Step A.3: Custom content rule

Open your custom Theme folder and edit the theme-content.less file (see Theme folder and file structure).

Depending on which option you chose in Step A.2 follow the corresponding steps.

A.3 Option 1: Use a sprite

Define a new css-rule for your icon (see customstyle in Form-Attributes) in your theme-content.less.
Use the sprite-variable for your background-image and your icon-variable to define the position of your custom icon.

Blue.pngThe CSS-Rule selector has to be prefixed with the common Action-Class '.ig-action '. Take the image value of your FormAction as a class-selector to specialize the rule.


...
.ig-action .custom-icon-like
{
    background-image: @custom-icon-sprites;
    background-position: @custom-icon-like;
}
...


A.3 Option 2: Use single image

Define a new css-rule for your icon (see customstyle in Form-Attributes) in your theme-content.less.
Use the icon-variable of your 16x16pixel image to define the background-image.

Blue.pngThe CSS-Rule selector has to be prefixed with the common Action-Class '.ig-action '. Take the image value of your FormAction as a class-selector to specialize the rule.


.ig-action .custom-icon-like
{
   background-image: @custom-icon-like;
}




Step A.4: Reload

Reload your page and restart the web-application (iisreset) after that don´t forget to clear browsers cache if you work on style customization.

Custom Icon for form action








GMSC 2013GMSC 2014

Variant B: With Custom Style

Create a new custom style or use an existing one to define a new custom icon for your workflow actions.
Read customstyle in Form-Attributes) for more information.


Step B.1: FormAction image attribute

Edit the image attribute of your FormAction in your FormSettings (eg. image='custom-icon-like' see image attribute of FormAction)

...
<FormField name="FormField">
   <FormAction name="Action" action="SCRIPT[IG.notify('I Like').show()]" image="custom-icon-like" />
</FormField>
...



Step B.2: Css-Rule

Create a custom style or use an existing custom style and define a new css-rule for your icon (see customstyle in Form-Attributes).
Use a 16x16pixel image as background-image.

Blue.pngThe CSS-Rule selector has to be prefixed with the common Action-Class '.ig-action '. Take the image value of your FormAction as a class-selector to specialize the rule.


.ig-action .custom-icon-like
{
   background-image: url(img/custom-icon-like.png);
}



Step B.3: Reload

Reload your page and don´t forget to clear browsers cache if you work on style customization.

Custom Icon for form action