{"id":12072,"date":"2017-12-20T13:05:03","date_gmt":"2017-12-20T05:05:03","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=12072"},"modified":"2024-10-23T14:21:07","modified_gmt":"2024-10-23T06:21:07","slug":"text-label","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/","title":{"rendered":"Text Label"},"content":{"rendered":"\n

This article applies to versions 4.5.3 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

Overview<\/h2>\n

The Text Label displays text on a page.<\/p>\n

The diagram below shows a configured text label on a grid, in Studio mode. The text label here has been styled, and includes variable data.<\/p>\n\n\n\n\n\n
Content<\/strong>:<\/td>\nThe text displayed in the label. Any added data is enclosed in curly brackets {} with any formatting applied.<\/td>\n<\/tr>\n
Add Data:<\/strong><\/td>\nYou can add data to the content. The selected data (fixed or variable) forms part of the content text.<\/td>\n<\/tr>\n
Style<\/strong>:<\/td>\nSelect one of the available styles from the drop-down list, or keep the default style.\u00a0If you are a Style Administrator,\u00a0you can\u00a0add a new Text Label\u00a0style.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\"\"<\/a><\/p>\n

Related: The Text Label<\/a> in display mode, Adding a Text Label style<\/a><\/p>\n

 <\/p>\n

\n

Interaction with other Controls<\/h2>\n

The Text Label interacts with other controls on the page if it is configured to use variable data from other controls.<\/p>\n

Watch the video below to see how the Text Label changes every time the page default endTime<\/em> updates.<\/p>\n\r\n\t\r\n\t

The page default variable endTime<\/strong> is embedded as data in the Text Label's Content<\/strong>. The endTime<\/strong> variable is refreshed every second by a Current Date\/Time Toggle<\/em> component, until this is switched off.<\/p>\n

 <\/p>\n

\n

Tutorial:\u00a0Adding a Text Label with Data<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we'll add a Text Label component, and add the page default value of endTime<\/strong>. We'll configure the endTime to use the Full Date<\/strong> format<\/p>\n

\"\"<\/a><\/p>\n

Note: <\/strong>Before you start the tutorial, prepare a page in Studio.<\/a><\/p>\n

\"\"<\/a><\/p>\n

Step 1. Add a Text Label to the Page<\/strong><\/p>\n

Drag and drop a Text Label component onto a grid cell.\u00a0The Text Label is in the Display \"Display\u00a0group.<\/p>\n

\"\"<\/a><\/p>\n

Step 2. Configure the Text Label<\/strong><\/p>\n

In this example we will add Value <\/em>data to the Text Label, by selecting the Values<\/em> \"\" data category.<\/p>\n

Click the Text Label<\/strong> component to configure it:<\/p>\n\n\n\n
\n\n\n\n\n\n
\u00a0<\/td>\n1. Add Content<\/strong>:<\/td>\nContent<\/strong> is a combination of text and formatted data. To add text, type it into the edit box. To add data, click Add Data<\/strong>. See the next section for details on adding content.<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n2. Select a Style<\/strong>:<\/td>\nIn the Selected Option<\/strong> drop-down list, select Normal Centered<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
\u00a0<\/td>\n <\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Adding Content<\/strong><\/p>\n

Content<\/strong> is a combination of text and formatted data. To add text, type it into the edit box. To add data, click Add Data<\/strong>.<\/p>\n\n\n\n
\n\n\n\n
\n\n\n\n\n\n
1. Add Content<\/strong>:<\/td>\nIn the Content<\/strong> edit box, type The current date is: <\/em><\/td>\n<\/tr>\n
2. Add Data<\/strong>:<\/td>\nClick Add Data<\/strong> to add data to the content text.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
\n\n\n\n
\n\n\n\n\n
A data panel appears below the Content<\/strong> edit box.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
\n\n\n\n
\n\n\n\n\n\n
3. Select a data type<\/strong>:<\/td>\nIn the Type<\/strong> drop-down list, select Datetime<\/em>.<\/td>\n<\/tr>\n
\u00a0<\/td>\nWe're going to select the page default value for endTime<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
\n\n\n\n
\n\n\n\n\n\n\n\n\n
4. Select the endTime<\/em> variable<\/strong>:<\/td>\nFollow the instructions in Using Value Data<\/a> to add the endTime<\/em> variable.<\/td>\n<\/tr>\n
 <\/td>\nNote<\/strong>: For instructions on adding different categories of data (such as Tag or Attribute data), see the section: Options for a Text Label's Data<\/a>.<\/td>\n<\/tr>\n
5. Format the Datetime<\/strong>:<\/td>\nThe various types are require text formatting, so that they can form part of the Text Label's Content<\/strong>. In the Format<\/strong> drop-down list, select Full Date<\/em>.<\/td>\n<\/tr>\n
 <\/td>\nNote<\/strong>: For more about formatting the various data types, see the section: Options for Formatting a Text Label's Data<\/a>.<\/td>\n<\/tr>\n
6. Click Add<\/strong>:<\/td>\nThis adds the formatted data to the Content<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
For numerical data (not shown here), choose a Separator<\/strong> using the check box.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

In preview mode, the Text Label shows the content, including the changing endDate<\/em> date.<\/p>\n

\"\"<\/p>\n

\n

Options for a Text Label's Data<\/h2>\n

There are up to five separate data categories that you can choose from, when adding data to a Text Label, depending on the data's Type<\/em>.<\/p>\n

Here is the full reference of data categories you can choose from (including the dataset category already covered in the Tutorial).<\/p>\n

Note: <\/strong>You can tab through the different data categories, to configure them. The one that is selected when you add the data remains the configured option. Any other configurations will be lost.<\/p>\n\n\n\n\n\n\n
Select a Data Category<\/strong><\/td>\n\u00a0<\/td>\n<\/tr>\n
\n

Dataset<\/strong> \"\" Add dataset (relational) data to your Text Label's Content. See how: <\/strong>Using Dataset Data<\/a><\/p>\n

\"\"<\/a><\/p>\n<\/td>\n

\n

Attribute<\/strong> \"\" Add attribute data to your Text Label's Content. See how: <\/strong>Using Attribute Data<\/a><\/p>\n

\"\"<\/a><\/p>\n<\/td>\n<\/tr>\n

\n

Ad-hoc Calculation<\/strong> \"\" Add ad-hoc calculation data (using tags, calculations and\/or attributes) to your Text Label's Content. See how: <\/strong>Using Ad hoc Calculation Data<\/a><\/p>\n

\"\"<\/a><\/p>\n<\/td>\n

\n

Tag<\/strong> \"\" Add tag data to your Text Label's Content. See how: <\/strong>Using Tag Data<\/a><\/p>\n

\"\"<\/a><\/p>\n<\/td>\n<\/tr>\n

\n

Value<\/strong> \"\" Add value data to your Text Label's Content. See how: <\/strong>Using Value Data<\/a><\/p>\n

\"\"<\/a><\/p>\n<\/td>\n

\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Options for Formatting a Text Label's Data<\/h2>\n

When you add data to a text label, you can choose from various formats.<\/p>\n

The available options relate to the data's Type<\/em>:<\/p>\n