Configuration¶
First you need to take a decision on if you will use the component in the header or as an option field (recommended for shared cloud).
Info
If your status-flow does not require customizations through commands it is recommended to use it as an option field. This is always the the case in shared cloud.
Add component on your card (In View config)¶
Web Client - Flow Limeobject Header¶
Congratulations on your choice! A good one aswell 😃
Go to Lime Admin => Views => <Limetype you want it on> => Card:
Scroll down to Web Components and press Add.
As a name write: lwc-status-flow-limeobject-header
In the section Properties you'll need to do some configuration.
| Name | Type | Default value | Description |
|---|---|---|---|
| optionPropName | string |
N/A |
What option property to use and fetch its options from |
Example config for deal, deal status (limeobject header)¶
{
"optionPropName": "dealstatus"
}
Now you are ready to jump to Configure action and visualization of the component
Web Client - Flow Option Field¶
Congratulations on your choice! 🙂
Go to Lime Admin => Views => <Limetype you want it on> => Card => <Property you want to replace>:
Go to the section Web Component write the following:
As a name write: lwc-status-flow-option-field
Under the section Layout set the property: colSpan to <max value available>
Leave the Properties section empty
Configure action and visualization of the component¶
Go to Lime Admin => Settings => Status flow => Limetype config
Add a new Item with the button.
Fill in the form to configure to your needs.
Migration of old config
If you have had an old version and want to migrate old config to the new version.
Go to the Migration section in Status flow and follow the instructions
Unique name¶
The unique name always start with <limetype name>.<property name> and you can manually add a suffix to be able to have multiple flows on the same property
Then you can use this name to select what flow to use by sending the unique name to the status-flow components using the property configName.
If you don't provide a configName it will work as before, finding the first flow that matches your limetype and property.
How to use the property
When configuring the status-flow component in the view config you always set a name and then you can add properties below. There you should add:
{
"configName": "<my full unique name>"
}
Can be used together with Object variants
So now you can reference different flows for different variants using the property configName
How to handle images and it's size in Guidance¶
If you want to add an image to a guidance in a step. Insert it using HTML, here's an example:
<img
src="https://www.lime-technologies.se/wp-content/uploads/2020/05/Logo-top.png"
alt="Lime Logo"
style="max-height: 8rem"
/>
| Name | Description |
|---|---|
src |
A link to the image you want to show |
alt |
A text that shows if image can't load |
style |
Here you can give it styling (how it looks like), in the example we set a max-height so that it scales down to a max height of 8rem |
You can read more about images in HTML here
Example of config strucutre in Lime Admin (for deal status on deal)¶
{
"name": "deal.dealstatus",
"visualize_configs": [
{
"detailProperty": {},
"guidance": [
{
"lang": "en",
"text": "# Marked in the browser is now possible if you update the properties\n\nRendered by **marked**.\n - one\n - two"
},
{
"lang": "sv",
"text": "# Marked är nu tillgängligt om du uppdaterar properties\n\nFormaterat med **marked**.\n - ett\n - två"
},
{
"lang": "default",
"text": "# Marked in the browser is now possible if you update the properties\n\nRendered by **marked**.\n - one\n - two"
}
],
"flowItemAttributes": {},
"option": "contact",
"color": "rgb(var(--color-blue-default))",
"icon": "phone_message_92462",
"is_off_progress": false
},
{
"detailProperty": {},
"guidance": [],
"flowItemAttributes": {},
"option": "requirement",
"color": "rgb(var(--color-teal-default))",
"icon": "advanced_search",
"is_off_progress": false
},
{
"detailProperty": {
"name": "quotesent",
"dateFormat": "relative"
},
"guidance": [
{
"lang": "en",
"text": "# Marked in the browser\n\nRendered by **marked**.\n\n 1. First item\n 2. Second item\n 3. Third item\n - Indented item\n - Indented item\n 4. Fourth item"
},
{
"lang": "sv",
"text": "# Marked är nu tillgängligt\n\nFormaterat med **marked**.\n\n 1. Första punkten\n 2. Andra punkten\n 3. Tredje punkten\n - Underpunkt\n - Underpunkt 2\n 4. Fjärde punkten"
},
{
"lang": "default",
"text": "# Marked in the browser\n\nRendered by **marked**.\n\n 1. First item\n 2. Second item \n 3. Third item \n - Indented item \n - Indented item \n 4. Fourth item"
}
],
"flowItemAttributes": {},
"option": "tender",
"color": "rgb(var(--color-green-default))",
"icon": "new_document",
"is_off_progress": false
},
{
"detailProperty": {},
"guidance": [
{
"lang": "default",
"text": "# Marked\n\n<img alt=\"Lime Logo\" src=\"https://www.lime-technologies.se/wp-content/uploads/2020/05/Logo-top.png\" style=\"max-height: 8rem\" />"
}
],
"flowItemAttributes": {},
"option": "agreement",
"color": "rgb(var(--color-green-dark))",
"icon": "win",
"is_off_progress": false
},
{
"detailProperty": {},
"guidance": [
{
"lang": "default",
"text": "# Marked in the browser\n\n <html>\n <body>\n </body>\n </html>\n\n*italic*"
}
],
"flowItemAttributes": {
"disabled": true,
"secondaryText": "Work harder, no rejections!!"
},
"option": "rejection",
"color": "rgb(var(--color-red-dark))",
"icon": "closed_sign",
"is_off_progress": true
},
{
"detailProperty": {},
"guidance": [],
"flowItemAttributes": {},
"option": "onhold",
"color": "rgb(var(--color-coral-default))",
"icon": "circled_pause",
"is_off_progress": true
}
],
"exclude_statuses": [],
"command_id": null,
"guidance_size": "small",
"limetype": "deal",
"full_path_to_property": "deal.dealstatus",
"unique_name": "deal.dealstatus"
}
Visualize Config¶
The value is a separate dictionary described below
| Name | Type | Default value | Description |
|---|---|---|---|
| option | string |
N/A |
What option to describe |
| color | string |
var(--mdc-theme-primary) |
What color to use for the step for example: rgb(var(--color-blue-default)), red, #CCC |
| icon | string |
N/A |
What icon to use for the step for example: add_ticket, outgoing_data, ok |
| detailProperty | DetailProperty |
N/A |
A dictionary containing settings for lime property to be shown. See here for more info |
| guidance | GuidanceText |
N/A |
A dictionary containing language code and MarkDown describing the current steps in detail. See here for more info |
| is_off_progress | boolean |
false |
true if the option should be outside the flow, as a side step |
| flowItemAttributes | dict |
{} |
A dictionary of values to be sent to the FlowItem See docs here |
Detail Property¶
| Name | Type | Default value | Description |
|---|---|---|---|
| name | string |
N/A |
What Lime property to fetch value from |
| dateFormat | string |
N/A |
Only applicable if the name property is a time field. Can be set to relative (Relative to "now" i.e. "10 minutes ago"), relativeCalendar (Relative to "yesterday") or a string described here |
Guidance Text¶
| Name | Type | Default value | Description |
|---|---|---|---|
| lang | string |
N/A |
language code (en, sv, ..., default) default is used as fallback. key is used to locate text to show |
| text | string |
N/A |
MarkDown describing the current steps in detail |