Skip to content

Configuration

Jump to bottom
dave007700 edited this page Oct 25, 2022 · 5 revisions

Welcome to Printable Workitem Dashboard Widget Configurator!

With this tool you have the possibility to create and edit the configurations which can be used to determine how a Work Item, based on there Type will be displayed in the Widget. This file will guide you through your first usage of the tool. Furthermore you will be shown how to use the tools the best way possible to get the most out of them. Commands and other small functions, which have a big influence, are also shown as well as their correct use.

Page Contents:

Welcome to Printable Workitem Dashboard Widget Configurator!

Configuration

The configuration is what this tool will create and output with all the data you provide. The configuration uses the JSON format. Each Type has its own Configuration.

Structure

The configuration consist of three main components.

  • Type
    • This components provides the tool with the information on which Types this configuration is used for.
  • Config
    • This component provides the tool with the information about the dimensions of the display.
  • Values
    • This component provides the tool with the information about how everything should be displayed.

Download a Configuration

If you have finished with everything and you would like to download the configuration, you can do this by clicking on the button labeled “Download”. After you clicked on that button, you will be asked to enter a name for the file which gets downloaded. You don’t have to add .json to the end of the name. The tool will make that for you. The file will then be downloaded as JSON.

Upload a Configuration

If you want to edit a configuration that you have downloaded, you can do so with little effort. All you have to do is click on the button which has the label “Upload Config”. Doing that, will open a dialog asking you which option you want to use. You can choose between File and Text.

If you select Text another dialog will open, asking you to parse the Configuration as Text in the JSON Format. It's recommended to not parse configurations, which have more than 6'000 characters. If your configuration has more than 6'000 characters, please convert the configuration to a file and select the File option when trying to upload a file. After you parsed your Text, click on the Button labeled "Upload" and the file gets parsed.

If you select File another dialog will open, asking you to select the Configuration as File in the JSON Format. Select the file and click on "Upload" and the file gets parsed.

After you clicked on "Upload" with any of the two options, an new dialog will appear, asking you if the configuration, which is about to get parsed, should get checked by the system, in order to find errors, which make the configuration invalid. If you click on "Yes", the System will check your configuration and look for errors. The time this will take, is based on the size of your configuration, but shouldn't take longer than a few seconds.

Afterwards, if your configuration is valid, it will be displayed.

Load Config from

The configuration, which should be used, can be loaded from two different sources. The first option, which is also the default one, is to load the configuration directly from the Widget itself. The second option is to save the configuration as a Process Attachment and then read it from it. The advantage of the second option is that the configuration only has to be changed/updated in on place, in order that all the other Widgets which also use this configuration automatically apply all changes.

In order to adjust this, you must select, using the dropdown menu, what kind of variant you want to use. The dropdown menu can be found next to the text “Config From:”. If the option “Work Item” is selected, the configuration is loaded directly from the Widget. If the option “Process Attachment” is selected, the configuration is read from the “Process Attachment”.

In order to be able to read a configuration which has been stored as “Process Attachment”, it must correspond to a certain syntax. Which is the following: “print-wi/[name].json”. For this to work, “[name]” must be replaced with the name you want to use.

e.g:

print-wi/default.json
print-wi/env/template.json
print-wi/env/test/file/something.json

In order to change the configuration which gets used, from the “Process Attachment”, you can change it by selecting the wanted configuration from the dropdown menu, which is next to the text “Current Attachment:”.

Types

Types are the essential of this tool. Everything will be based on them. It’s important that there setup is correct. You won’t be able to do anything without any types.

Create Types

In order to create a new “Type” all you need to do, is to click on the Button with the label “Create Type”. After clicking that button, you will be asked to give it a name. It’s recommended to create the “*” Type first. This Type is special, because it will be used as the fallback type, if none of the given Types matches. If you want multiple Types, you can do that by separating them by adding “;” between the Types. For example if you use “Story;Task;” this Configuration will be added if the Type of the Work Item is either a “Story” or “Task”.

IMPORTANT: Each Type can only exist once!!!

Switch to another Type

If you have multiple Types you probably want to switch between them. You can do this by selecting the Type you want to switch to inside the Drop-down next to the “Current Type” text.

This will be possible as soon as you have created at least two different Types.

Rename a Type

You can rename the current Type by clicking on the button with the label “Rename Type”. After clicking the button you will be ask to enter the new name.

IMPORTANT: Each Type can only exist once!!!

Duplicate Type

You might have worked on an Type which you would like to use as template. With this feature this is possible. By clicking on the button which is labeled as “Duplicate Type”. After clicking that button, you will be asked to enter the name of the Type you would like to copy from. After you selected the Type you would like to copy from, you will be informed, that this action can not be undone.

If you want to duplicate a Type, you can do this by using this feature. By clicking on the button which is labeled "Duplicate Type", a new dialog will open, where you're asked to enter the type of the duplication. After you've entered the new Type, click on the button labeled "OK".

If the Type isn't used already, the System will duplicate the current selected type, set the type of the duplicate to the type which was provided and change the Current selected Type to the new duplicated Type.

If the Type already exists, you will be asked if you want to overwrite the already existing configuration. If you click on "Yes" the configuration will be overwritten by the System.

IMPORTANT: Overwriting a configuration can't be undone.

Delete a Type

You can delete a Type by clicking on the button labeled “Delete Type”. After you clicked that button, you will be informed, that this action can not be undone. You'll need to confirm this actions by clicking "OK" in the dialog. If you've only one or less Configurations, you will be denied from using this action.

This will be possible as soon as you have created at least two Types.

Regions

Regions define how everything looks. They tell the Region-Render how, where and what should be displayed. A configuration consists of many Regions. This means, that it's very important to understand how regions and their properties work, in order to use the tool in the most optimal way.

Create a Region

First you need to make sure that the “Region Create” tool is selected. You can check this by checking that the box next to the text “Region Create” is selected. If that isn’t the case, you can select that tool by clicking on “Region Create”.

In order to create a new Region you can simply click inside the grid where you want the Region to be placed. Clicking inside the Grid will generate a Colored-Box. This box shows the first point of the Region. The Region isn’t created yet. If you changed your mind and don’t want the first point to be at that position, you can reset it by just leaving the Grid with your mouse. This will reset the selection.

In order to create the second point of the Region you just to need to click inside the grid where the region should finish. After you’ve done that, the region will be generated by the system.

The Background color of the generated region is based on the field in the upper left corner, which is labeled “Default Background color”. If you want to change the default value for the region, which get generated, you just need to change the value there, by clicking on the color next to the text. If you do that and generate a new region, you will see that the new region will have that color as background.

The Font color of the generated region is based on the field in the upper left corner, which is labeled "Default Font color". If you want to change the default value for the regions, which get generated, you just need to change the value there, by clicking on the color next to the text. If you do that and generate a new region, you will see that the new regions will have that color as font color.

After generating a new region, the system will always automatically select the created region.

Select a Region

First you need to make sure that the “Region Select” tool is selected. You can check this by checking that the box next to the text “Region Select” is selected. If that isn’t the case, you can select that tool by clicking on “Region Select”.

Selecting a region is very easy. All you need to do is to click on the region you’d like to select. That’s everything.

Delete a Region

First you need to make sure that the “Region Delete” tool is selected. You can check this by checking that the box next to the text “Region Delete” is selected. If that isn’t the case, you can select that tool by clicking on “Region Delete”.

IMPORTANT: You can't undo this action !!!

Deleting a region is very easy. All you need to do is to click on the region you’d like to delete. The region will afterwards be deleted without asking you for confirmation.

Move Regions to upper left corner

If you want to move all the current Regions to the left upper corner as much as possible, without needing to remove every Region and creating a new one at the right position, you can use the button, which is labeled “Move Grid-Content to corner”. This will take the content off the Grid-System, meaning every Region, and move it to upper left corner as much as possible.

Toggle Grid

If you want to know how the configuration will look like without the markings of the Grid-System, clicking on the button labeled “Toggle Grid”, will remove all the borders from the Grid-System which don’t belong to any Region. Only the outer boarder of the Grid-System will be visible to indicate how the current dimensions of the Grid-System are. The background color of the button should turn Green indicating that the “Toggle Grid” mode is activated.

In order to again show the boarders of the Grid-System, you just need to click on the button with the “Toggle Grid” label. The background color of the button should turn Red indicating that the “Toggle Grid” mode is deactivated.

Configure a Region

To make a region useful you first have to define everything for this region. This is possible with the “Region View” tool. The tool only appears once you have selected a region. With this tool you have the possibility to define the Background color, text color, font size, text, text binding and if the region should have a border or not.

Background Color

With this property you have the possibility to change the background color of the region you currently selected. The default value is #ff (Red)

Text Color

With this property you have the possibility to change the color of the text which the region should have. The default value is #ffffff (White).

Font Size

With this property you have the possibility to change the size of the font inside the region you currently selected. The default value is 10

Text Binding

With this property you have the possibility to change where the text in the current selected region is aligned. The default value is left

Text Vertical

With this property you have the possibility to change where the text in the current selected region is positioned vertical. The default is top

Borderless

With this property you have the possibility to change if the current selected region shouldn’t have a border. This property is very useful if you want to have a region inside another region. The default value is false.

Width

With this property you have the possibility to change the width of the current selected region.

Height

With this property you have the possibility to change the height of the current selected region.

Pos-X

With this property you have the possibility to change the X Position of the current selected region.

Pos-Y

With this property you have the possibility to change the Y Position of the current selected region.

Dynamic Height

With this property you have the possibility to make the height of this region to be based of the content of this region. This option is only available, if the width of the region, equals the total width of the configuration.

Tooltip

With this property you have the possibility to display a Tool-Tip over a given region, when the user is hovering over it.

Text

With this property you have the possibility to change the content of the current selected region. You have the option to use dynamic text.

You also have the option to use HTML tags. In order to ensure the security of this application only certain HTML tags are allowed.

Tag Explanation Example Result
b Will make the text bold <b> This is a bold text </b> This is a bold text
i Will make the text italic <i> This is a italic text </i> This is a italic text
u Will make the text underline <u> This is a underlined text </u> This is a underlined text
s Will make the text strikethrough <s> This is a strikethrough text </s> This is a strikethrough text
br Will make a break between a text Line 1 <br> Line 2 Line 1
Line 2
p Will make the text as paragraph <p> I'm a paragraph </p>

I’m a paragraph
a Will create a Link <a href="https://google.com">Google\ [Google]
div Defines a section in a document This is a section <div style="color:red;"> in red </div> This is a section
in red
span Defines a section in a document This is a section <span style="color:green;"> in green </span> This is a section in green
hr Defines a thematic change in the content Line 1 <hr> Line 2 Line 1 Line 2
ul Defines an unordered list <ul><li>Value 1</li><li>Value 2</li></ul>
  • Value 1
  • Value 2
ol Defines a ordered list <ol><li>Value 1</li><li>Value 2</li></ol>
  1. Value 1
  2. Value 2
li Defines a list item <li>Value 1</li><li>Value 2</li>
  • Value 1
  • Value 2
    		•
    synthetic Generated by IBM Jazz - -

    Dynamic Text

    In order to have the possibility for a configuration to be used for multiple Work Items, you have the possibility to use “Dynamic Text”. This is text which you define with placeholder in order for the “Text Render” to replace them later with real text.

    Structure

    Every placeholder inside an “Dynamic Text” starts with “{{” and ends with “}}”, which tell the “Text Render” to watch out for the keyword which should get translated.

    If you look at the example below you see that {{id}} has the structure of an template and will therefore be translated.

    • Dynamic Text: The ID is {{id}} and this is more text.
    • Translated: The ID is 1 and this is more text.

    It’s important to know that you can have multiple templates inside a “Dynamic Text” as you can see in the example below.

    • Dynamic Text: The ID is {{id}} and the summary says: {{summary}}
    • Translated: The ID is 1 and the summary says: I'm the Summary

    Keywords

    In order for the translator to know to which text the “Dynamic Text” should get translated, the keyword is very important. The keyword can be found between “{{” and “}}” inside the “Dynamic Text”.

    A list of all the available keywords and there values, can be found if you click the Button, which is labeled, “Toggle Keys and Values”. This will toggle the list to be shown. In order to hide the List, you need to click again on the Button, which is labeled, "Toggle Keys and Values".

    If a Keyword doesn’t exist and it isn’t tagged with the “Optional Command” it will display the not translated keyword. If you try to translate a list, which is empty and that keyword isn’t tagged with the “Optional Command” it will display [Empty-List]

    Special Cases

    The list of keywords that can be found under "Toggle Keys and Values" is not the complete list that can be used. There are some keywords that can only be used in certain cases, therefore the aren't to be found in the list.

    Query

    If a "Query" is selected during printing, the "position" of the Workitem inside the Query can be accessed and used.

    Keyword Description Example
    com.siemens.bt.jazz.printableworkitems.custom.query.position The Position of the Workitem inside the selected query 1

    Print Plan

    If a "Plan" is selected during printing, the "rank" and other additional information for the Workitem can be displayed. The names in the overview, will be defined as "Rank: {Number} | {Summary}". If there is a exclamation mark surrounded by two brackets "(!)" before the Rank-Number, this means that the workitem isn't ranked and therefore, the order of this workitems can't be guarantied.

    Keyword Description Example
    com.siemens.bt.jazz.printableworkitems.custom.plan.rank The Rank defined by Jazz Nooool
    com.siemens.bt.jazz.printableworkitems.custom.plan.id The ID from the Workitem 24
    com.siemens.bt.jazz.printableworkitems.custom.plan.summary The Summary from the Workitem Some Text
    com.siemens.bt.jazz.printableworkitems.custom.plan.type The Type from the Workitem Task
    com.siemens.bt.jazz.printableworkitems.custom.plan.localRank The Rank, in relation to the local list.The Sequence for all Workitems, which aren't ranked, can't be guaranteed. 1

    Current

    You can get information about the user viewing the Printable-Workitem or the current time and date with the custom "current" key.

    Keyword Description Example
    current.user.archived Is the current user archived false
    current.user.emailAddress E-Mail of the current user [email protected]
    current.user.immutable - true
    current.user.itemId ID of the current user _abcdefg12345
    current.user.modified Last time user was modified 2019-05-03T12:34:56.789Z
    current.user.name Name of the current user ADMIN
    current.user.stateId Not the same as the itemId _12345gfedcba
    current.user.userId ID of the current user [email protected]
    current.date The current date and time. Can be modified with the "date" Smart-Command Tue, 30 Nov 2021 12:34:56 GMT
    current.date.f.g.time Current time in the HH:MM:SS format 12:34:56
    current.date.f.g.date Current date in the dd/mm/yyyy format 30/11/2021
    current.date.f.us.date Current date in the mm/dd/yyyy format 11/30/2021
    current.date.l.time Current time, formatted by the Browser 12:34:56 GMT+0100 (Central European Standard Time)
    current.date.l.date Current date, formatted by the Browser Tue Nov 30 2021

    The key "current.date" can be formatted with the help of the "date" Smart-Command. The sub-keys for "current.date" can't be formatted.

    Match

    If you try to use keys which aren’t the same all the time, this feature is what you need. This occurs if you want to use a key which is based on the status of the Workitem.

    An example is the com.ibm.team.apt.attribute.planitem.newRanking.123abcd456 keyword. This keyword will always end with the status of the Workitem. Instead of using the status you can replace it with *. Then you should end up with com.ibm.team.apt.attribute.planitem.newRanking.*

    * will tell the “Text Render” to match the first best value which either starts or ends with the given keyword based on where you placed the * key. Its important to know that you can set the * either at the beginning or the end of a keyword.

    Command

    Commands are always placed after an keyword. They always start with #. You can only use one command per keyword, meaning that they can’t be stacked, except for the “Optional command”.

    e.x: {{internalComments#length}}

    If a given command does not exist and isn’t tagged with the “Optional Command” it will display [Undefined-Command]

    Command For Text For List Example Text Example List
    length Shows the amount of characters in the translated text Shows the number of entries {{summary#length}} {{internalComments#length}}
    ‘Number’ Shows the character at the position of the given ‘Number’ - 1 Shows the entry at the position of the given ‘Number’ - 1 {{summary#5}} {{internalComments#1}}

    If you want to use the ‘Number’ command but aren’t sure that the number you give as input will exist, you can tag the command as “Optional Command”. That way, if the number you want to display does not exist, nothing will be showed instead of an error.

    e.x: {{internalComments#?5}}

    Optional Command

    A Command can be tagged as “Optional Command” if direct after the # character there is an ?. This will tell the “Text Render” if the translation isn’t possible to keep it empty instead of showing an error.

    e.x: {{internalComments#?length}}

    In addition you have the possibility to use the “Optional command” without needing to define a command. Thereby you have the possibility to set “Keywords” that don’t exist, without the “Text Render” showing the original “Keyword” but instead leaving it blank.

    This can be quit useful if you want to use for example the parent: “Keywords”. The parent “Keyword” will only be defined and usable if the Workitem has a “parent” Workitem. If you then want to use that configuration for a Workitem which doesn’t have a parent, the original “Keyword” will be shown.

    Text Result
    Parent ID: {{parent:0:id}} Parent ID: {{parent:0:id}}
    Parent ID: {{parent:0:id#?}} Parent ID:
    Example for Workitem without a Parent.

    Smart Command

    In order to use the Command functions in a more advanced way, you will need to know about “Smart Commands”. A "Smart Command" is basically an extension to the "Command" which you already know about. Instead of giving the "Command" only an extra word or number, you’ll need the parse more specific values, which are used by the "Smart Command" - System to identify what you’re trying to do. The value which gets used, and worked with for the "Smart Command", is the translated keyword.

    Structure

    A "Smart Command" needs to be set at the same position as a "Command", after the keyword and inside a "Dynamic Value". There can only be used one "Smart Command" per "Dynamic Value", which means that they can’t be stacked, expect for the Optional Command.

    Just like a command, in order to tell the "Text-Renderer" that the next Value is a "Command" you need to add #, before the "Command" starts.

    Afterward for the "Text Renderer" to Translate the "Smart Command" correct; some keywords need to be set.

    Keywords

    In order to start, each "Smart Command" needs to be set inside [ and ]. Every keyword gets separated by the “;” character.

    t / type

    This keyword is required for the "Smart Command" to know, how the value should get handled. ex:

    • t:css
    • type:css

    s / show

    This keyword defines if the translated value should get shown or be hidden. Use 0 in order to hide it and 1 in order to show the value. ex:

    • s:0
    • show:1

    css

    In order to use this keyword, you need to set the “t / type” value as css. With this keyword, you’ll have the possibility to manipulate the css of each cell, where the "Region" is set. ex:

    • css: background

    If you want to manipulate multiple css properties at once, you can do that by separating them with a “,”. ex:

    • css: background, color

    The value will be added to the css as the value of the property. If you used “css:background” and the translated value is “yellow”, all the cells which are in the Area will turn “yellow”.

    Every value which is recognized from your Browser will be possible to use. Meaning you can use “yellow”, “#ffff00”, “rgb(255,255,0)” or “rgba(255,255,0,1)” and the color yellow, will always be shown.

    Full Example Only Smart Command: [t:css;s:0;css:background;] Dynamic Text with Smart Command: {{myValue#[t:css;s:0;css:background]}} Dynamic Text with Optional Command and Smart Command: {{UnknownDynamicText#?[t:css;s:0;css:background]}}

    table

    In order to use this keyword, you need to set the "t / type" value as table. With this keyword, you'll have the possibility to create a Table inside the Container

    Without Detailed Children: {{children#[t:table;s:1;table:id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type]}}

    With Detailed Children: {{children#[t:table;s:1;border:black;boldHeader:1;table:id&&w@5&&c@ID,workItemType&&w@15&&c@Type,summary&&w@55&&c@Summary,projectArea&&c@Project Area]}}

    children: Formated-List

    • [Dynamic Value]
      • children:0:id
      • children:0:summary
      • children:0:workItemType
      • children:1:id
      • children:1:summary
      • children:1:workItemType|

    t/type:

    • The type of the Smart-Command

    s/show:

    • show Value (0 = false, 1 = true)

    border:

    • Property to set the color of the border. If the property isn't set, there won't be any border. Needs to be supported by the type for usage. (ex: red)

    boldHeader:

    • Set the Header of the Table as Bold (0 = false, 1 = true)

    table:

    • Property which defines the content of the Table which gets generated. Everything in the Field/Region will be overwritten.
    • If you want to use the ":" character inside an Smart-Command for your Text and not for the Syntax, you can do that by adding a backslash () before the ":" character.
    • This should look like this :

    filter:

    • Property which defines which keys should get filtered and have which value. The key are from the value by using the "@" character. (ex: workItemType@Task)
    • In order to define multiple filters the "," character is needed. (ex: id@1,workItemType@Task)
    • In order to use a negative filter, you need to set "!!" before the value. (ex: workItemType@!!Task)
    • In order to use multiple values in one filter, you need to write the content of the filter, as a filter-list. You can do that by setting "([" at the beginning and "])" at the end of the value.
    • The different values, need to be separated by "&&". (ex: id@([1&&2]) )

    Structure

    • Field (1 or More)
      • Parameter (0 or More)

    ex: id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type

    Fields, are separated by a "," . Meaning if you want to use multiple fields, you need to separate them with a "," character. Ex: "id,name,summary"

    Parameters, get separated with "&&". In order to assign a value to a Parameter, you need to add "@" between the Parameter and the Value. Ex: id&&c@ID&&w@

    List of Parameters:

    • w = Width of the Column in percent (%) (ex: w@10 ===> Will make the Column 10% off the Width of the Table. All other columns, will use the left over and split it equally)

    • c = Content of the Column, instead of the Name of the Field (ex: c@Text ===> Will write Text in the Field instead of using the Field-Name) Not allowed are the following Characters: { : ; , @ && # }

    • f = Add or Overwrite the filter for this keyword with a given value (ex: f@Task ===> Will check if the content of the column value equals given value (Task))

    • date = Format the content of the column with a given pattern if the content is a Date (ex: [email protected] ===> Will return a formated date)

    • link = Create a clickable Text, based on the content of the column, instead of showing the real content (ex: link@Click Me ===> Will return clickable Text saying "Click Me")

    • clickNode = Allow the content to be replaced by with a link to the content of a key. (ex: clickNode@_url ===> Will replace the content with a clickable link, if the key is valid)

    Full Example

    Without Detailed Children: {{children#[t:table;s:1;table:id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type]}}

    With Detailed Children: {{children#[t:table;s:1;border:black;boldHeader:1;table:id&&w@5&&c@ID,workItemType&&w@15&&c@Type,summary&&w@55&&c@Summary,projectArea&&c@Project Area]}}

    With Inline-Filtered Children {{children#[t:table;s:1;table:id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type&&f@Task]}}

    With outline-Filtered Children {{children#[t:table;s:1;table:id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type;filter:category@Random]}}

    With negative-Filtered Children {{children#[t:table;s:1;table:id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type;filter:category@!!Random]}}

    With multiple-Filtereded Children {{children#[t:table;s:1;table:id&&w@10&&c@ID,summary&&w@65&&c@Summary,workItemType&&c@Type;filter:category@([Random&&Important])]}}

    With date-Formation for row "creationDate" {{children#[t:table;s:1;table:id,summary,workItemType,creationDate&&[email protected]]}}

    With link-Formation for row "_url" {{children#[t:table;s:1;table:id,summary,workItemType,_url&&link@Open Child]}}

    date

    In order to use this keyword, you need to set the "t / type" value as date. With this keyword, you'll have the possibility to format a Date

    If the given Value can't be converted to a Date, it will display the Value without any formatting done

    t/type:

    • The type of the Smart-Command

    s/show:

    • show Value (0 = false, 1 = true)

    date:

    • Property which defines the content of the Formatted-Date which gets generated
    • If you want to use the ":" character inside an Smart-Command for your Text and not for the Syntax, you can do that by adding a backslash (\) before the ":" character.
    • This should look like this :

    Keywords

    • s = Shows second of the Date

    • ss = Shows the second of the Date. If the value is lower than 10, it will be added a "0" as the first character

    • mn = Shows minute of the Date

    • mnmn = Shows the minute of the Date. If the value is lower than 10, it will be added a "0" as the first character

    • h = Shows hour of the Date

    • hh = Shows the hour of the Date. If the value is lower than 10, it will be added a "0" as the first character

    • d = Shows day of the Date

    • dd = Shows the day of the Date. If the value is lower than 10, it will be added a "0" as the first character

    • m = Shows month of the Date

    • mm = Shows the month of the Date. If the value is lower than 10, it will be added a "0" as the first character

    • mmm = Month as short text

    • mmmm = Month as full text

    • yy = Shows last two digets of the year of the Date

    • yyyy = Shows the full year of the Date.

    • Not allowed characters

      • : (Can be used if escaped [ \: ] )
      • ;
      • #

    Full Example

    • Show 'creationDate' Dates Time (With escaped character [ : ] )
      • Smart-Command: {{creationDate#[t:date;s:1;date:hh\:mnmn\:ss]}}
      • Translated Value: 14:39:00
    • Show 'creationDate' Dates Date
      • Smart-Command: {{creationDate#[t:date;s:1;date:dd/mm/yyyy]}}
      • Translated Value: 15/04/2019
    • Show 'creationDate' Dates Time and Date (With escaped character [ : ] )
      • Smart-Command: {{creationDate#[t:date;s:1;date:hh\:mnmn\:ss @ dd/mm/yyyy]}}
      • Translated Value: 14:39:00 @ 15/04/2019
    • Show 'creationDate' Dates Time and Month
      • Smart-Command: {{creationDate#[t:date;s:1;date:dd mmm]}}
      • Translated Value: 12 Oct
    • Show 'creationDate' Dates Time and Month
      • Smart-Command: {{creationDate#[t:date;s:1;date:dd mmmm]}}
      • Translated Value: 12 October

    image

    In order to use this keyword, you need to set the "t / type" value as image With this keyword, you'll have the possibility to display an image

    If the image can't be displayed, the description will be displayed, if any is set.

    If the image is bigger than the region, it will be cut of.

    t/type:

    • The type of the Smart-Command

    s/show: -

    • show Value(0 = false, 1 = true)

    src:

    • Load an Image from a given URL. Will ignore the value of the translated Value, meaning that it can by any Key.
    • Not allowed characters
      • : (Can be used if escaped [ \: ] )
      • ;
      • #
    • Due to the configuration of the Jazz-Server, only URL's which have the same Domain might be allowed. This is based on how the Jazz-Server was configured.

    "src_by" - Kewords

    • Keywords

      • src_by_name = Value which needs to be checked
        • An asterisk (*) can be used at the beginning, the end or on both sides as placeholder.
        • If multiple values match, the first one found, gets returned.
      • src_by_node = Name of the field, where the value should be placed in order to check
      • src_by_result = Which field should get returned if the value was found
      • src_by_case = Should upper/lower case be considered?
        • In order to disable this setting, it needs to be set to "0".
        • In order to activate this setting, you don't set the keyword or set it to "1".
        • The default value is set to "1"

    • Usage

      • In order to use the src_by-Kewords, the usage of the src keyword is not allowed.
      • In order to use the src_by-Kewords, three keywords (src_by_name, src_by_node, src_by_result) need to be placed and have a value attached to them.
      • The Command-Keywords, needs to be set to the name of the list, which should get searched.

    • Not allowed characters

      • : (Can be used if escaped [ \: ] )
      • ;
      • #

    • Examples

      • Search all the attachments for a image with the name "image_Name.png" and return the URL of the found image. (Case-Sensitive)
        • {{attachment#[t:image;s:1;desc:Some Image;width:250px;height:auto;src_by_name:image_Name.png;src_by_node:comment;src_by_result:url;]}}
      • Search all the attachments for a image with the name "iMaGe_nAme.Png" and return the URL of the found image. (Case-Insensitive)
        • {{attachment#[t:image;s:1;desc:Some Image;width:250px;height:auto;src_by_name:iMaGe_nAme.Png;src_by_node:comment;src_by_result:url;src_by_case:0;]}}
      • Search all the attachments for a image with the name, starting with "image_Name." and return the URL of the found image.
        • {{attachment#[t:image;s:1;desc:Some Image;width:250px;height:auto;src_by_name:image_Name.*;src_by_node:comment;src_by_result:url;]}}
      • Search all the attachments for a image with the name, ending with ".png" and return the URL of the found image.
        • {{attachment#[t:image;s:1;desc:Some Image;width:250px;height:auto;src_by_name:*.png;src_by_node:comment;src_by_result:url;]}}
      • Search all the attachments for a image with the name, containing "_Name" and return the URL of the found image.
        • {{attachment#[t:image;s:1;desc:Some Image;width:250px;height:auto;src_by_name:*_Name*;src_by_node:comment;src_by_result:url;]}}

    desc:

    • Property which defines what text should get shown, when hovering of the image or when the image can't be found / loaded.
      • Not allowed characters
        • : (Can be used if escaped [ \: ] )
        • ;
        • #

    width = Defines the width of the Image. If the value isn't set, the default value will be used (default = auto). For the value you can use "px" or "%" (ex: width:200px)

    height = Defines the height of the Image. If the value isn't set, the default value will be used (default = auto). For the value you can use "px" or "%" (ex: height:200px)

    Full Example

    • Make the image 250px wide and adjust the height

      • Smart-Command: {{imageUrlKey#[t:image;s:1;desc:Cool Image;width:250px]}} or
      • Smart-Command: {{imageUrlKey#[t:image;s:1;desc:Cool Image;width:250px;height:auto;]}}

    • Make the image 250px high and adjust the width

      • Smart-Command: {{imageUrlKey#[t:image;s:1;desc:Cool Image;height:250px]}} or
      • Smart-Command: {{imageUrlKey#[t:image;s:1;desc:Cool Image;height:250px;width:auto;]}}

    • Make the image 250px high and 250px wide

      • Smart-Command: {{imageUrlKey#[t:image;s:1;desc:Cool Image;height:250px;width:250px;]}}

    • Use a image from an external source

      • Smart-Command: {{id#[t:image;s:1;desc:Cool Image;width:250px;src:https\://www.fakeDomain.com/images/test.png]}}

    link

    In order to use this keyword, you need to set the "t / type" value as link. With this keyword, you'll have the possibility to create a clickable Text, which will direct you to the specified URL

    t/type: The type of the Smart-Command s/show: show Value(0 = false, 1 = true)

    link:

    • Load an Image from a given URL. Will ignore the value of the translated Value, meaning that it can by any Key.
      • Not allowed characters
        • : (Can be used if escaped [ \: ] )
        • ;
        • #
        • @
        • &&

    Full Example

    • Display the link to the first child as "To First Child"
      • Smart-Command: {{children:0:_url#[t:link;s:1;link:To First Child]}}

    Toggle

    In order to use this attribute, you need to set the "t / type" value as toggle. With this attribute, you'll have the possibility to hide and show a

    The Color of the arrow is based on the Font-Color.
    t/type The type of the Smart-Command
    s/show show (0 = false, 1 = true)
    toggle List of all the Areas which should be toggled when clicked. IDs need to be separated with a ','
    default (Optional) The state of toggle. Possible values are 'hidden' and 'show'. If not set the default is 'show'
    blink (Optional) Color of the blink. Text-Color or HEX value can be used. When using a HEX value '#' needs to be replace by '_'. If this property isn't set, no blinking will happen. The blinking will not be disabled once the arrow was clicked. During the Print-Process the blink will be disabled

    Full Example

    • Toggle Region with ID 4
    {{id#[t:toggle;s:1;toggle:4]}}
    • Toggle Regions with IDs 4 and 6
    {{id#[t:toggle;s:1;toggle:4,6]}}
    • Toggle Regions with IDs 4 and 6 and have them Hidden at the start
    {{id#[t:toggle;s:1;toggle:4,6;default:hidden]}}
    • Toggle Regions with IDs 4 and 6 and make the toggle blink yellow
    {{id#[t:toggle;s:1;toggle:4,6;blink:yellow]}}
    • Toggle Regions with IDs 4 and 6 and make the toggle blink #FF00FF (Purple)
    {{id#[t:toggle;s:1;toggle:4,6;blink:_FF00FF]}}
    • Toggle Regions with IDs 4 and 6, have them Hidden at the start and make the toggle blink yellow
    {{id#[t:toggle;s:1;toggle:4,6;default:hidden;blink:yellow]}}

    Home

    Dashboard Widget

    Configuration

    Welcome to Printable Workitem Dashboard Widget Configurator!

    Clone this wiki locally