![\"\"](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/07\/image002.png\")
<\/a><\/p>\nThe Text Input's value is retained in snapshots and page links.<\/p>\n
The primary purpose of a Text Input is to enable a user to filter a dataset query by typing in text or a number which is then used as a variable parameter to a dataset query. This is covered in the tutorials.<\/p>\n
Related: Using the Text Input<\/a>\u00a0in display mode, Variables<\/a> in Explorer<\/p>\n <\/p>\n 1. Variable Name<\/strong>:\u00a0Select a Text or Number variable. In display mode, the user types into the Text Input control to update the selected variable. This variable can be used elsewhere on the page, or as a dataset query parameter.<\/p>\n 2. Hint Text<\/strong>: Optionally add a hint, which appears over the text input in display mode, when the user's mouse hovers over it. This is also displayed in the text box if the Variable Name has no value.<\/p>\n 3. Style<\/strong>: Select a suitable style from the drop-down list (no styles are available in the example).<\/p>\n 4. Alignment<\/strong>: Click on one of the boxes to override the selected style's alignment.<\/p>\n Related: Styling Text Input controls<\/a><\/p>\n <\/p>\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 will use the Text Input component to allow the user to search a column (DowntimeComments) in a dataset. To achieve this, we'll add a Text Input component, and configure it to update a variable used as a parameter in a dataset query.<\/p>\n Next, we'll add a data table component that uses the dataset query, and a text label to describe the table.<\/p>\n Finally, in Display Mode<\/em>, we will demonstrate how to limit the dataset query result set by typing some text into the Text Input control. Note that this functionality is specific to this dataset, although the principle can be applied to other datasets. In this example, the result set will contain only rows where the DowntimeComments field contains part or all of the text that the user enters into the Text Input field.<\/p>\n Note<\/strong>: This tutorial uses the Sample Data <\/em> datasource and datasets that can optionally be made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n Filtering a dataset to limit the rows returned to the data table<\/p><\/div>\n There are four steps in this tutorial:<\/p>\n First, the dataset is described in the following section.<\/p>\n The dataset used here is called DowntimeQuery<\/strong>, with the description: Get all downtime from sample data, for the given period. The user can filter by comments<\/em>. This dataset is in the Oil and Gas Data<\/strong> datasource.<\/p>\n We will be configuring the Text Input to update the variable DowntimeComments<\/em> which we will assign to the dataset's DowntimeComments<\/span> parameter.<\/p>\n To add or update a dataset, you need access to IFS OI Server Management. Read more about How to Write a Dataset Query<\/a>.<\/p>\n Note: <\/strong>Before you start the tutorial, prepare a precision layout page in Studio<\/a> and save it with a suitable name, such as Text Input Tutorial<\/em>.<\/p>\n 1. Drag and drop a Grid Layout<\/a> onto the page, and give it a Width<\/strong> of about 1000 and a Height<\/strong> of about 470. Configure it to have three columns and two rows. Resize the first column to 45*<\/strong>, the second to 10*<\/strong>, and the third to 45*<\/strong>. Resize the first row to 20*<\/strong> and the second to 80*<\/strong>.<\/p>\n 2. Drop a second grid layout onto the page onto the top left cell, and another onto the top right cell, of the first grid. Configure each of these grid layouts to have one Column, and two Rows.<\/p>\n This is how the page should look at this stage:<\/p>\n Related: Default Value<\/a><\/p>\n 1. Open the Default Values panel.<\/p>\n 2. Click Add<\/strong> to add a new default value.<\/p>\n 3. Type the variable name DowntimeComments<\/em> and keep the Text<\/em> type.<\/p>\n Note<\/strong>: Leave the default value blank.<\/p>\n 1. Drag and drop a Text Input component onto the top left grid cell. The Text Input is in the Control Click the Text Input to configure it.<\/strong><\/p>\n 2. Select the new variable DowntimeComments<\/em> from the Variable Name<\/strong> drop-down list.<\/p>\n 3. Type Filter by downtime comments<\/em> into the Hint Text<\/strong> box.<\/p>\n Related: Text Label<\/a>, Data Table<\/a><\/p>\n 1. Drag and drop a Text Label (from the Display<\/strong> group in the Toolbox) into the cell below the Text Input.<\/p>\n 2. Drag and drop a Data Table (from the Table<\/strong> group in the Toolbox) into the cell below the Text Label.<\/p>\n 3. Give the Text Label a Content<\/strong> of Downtime reasons<\/em> and select a title Style<\/strong>, such as Page Subtitle<\/em>.<\/p>\n Give the Data Table's Data property a dataset:<\/strong><\/p>\n 4. Assign the Downtime Query<\/em> dataset to the Data Table's Dataset Query<\/strong>.<\/p>\n Allocate the Dataset Parameters:<\/strong><\/p>\n 5. Select the DowntimeComments<\/em> variable for the DowntimeComments<\/strong> parameter.<\/p>\n 6. Select the endTime<\/em> page variable for the EndDate<\/strong> parameter.<\/p>\n 7. Select the startTime<\/em> page variable for the StartDate<\/strong> parameter.<\/p>\n Add three table columns:<\/strong><\/p>\n 8. First column: Header<\/strong>: Area<\/em>, Column<\/strong>: Area<\/em>, Column Type<\/strong>: Text<\/em>.<\/p>\n 9. Second column: Header<\/strong>: Downtime Reason<\/em>, Column<\/strong>: DowntimeReason<\/em>, Column Type<\/strong>: Text<\/em>.<\/p>\n 10. Third column: Header<\/strong>: Downtime Comments<\/em>, Column<\/strong>: DowntimeComments<\/em>, Column Type<\/strong>: Text<\/em>.<\/p>\n You now have a functioning Text Input component, which updates the dataset query each time the user changes the text. The dataset query results appear in the Data Table.<\/p>\n To try out the new functionality:<\/strong><\/p>\n <\/p>\n We're going to update the page from Tutorial 1, by adding another Text Input component. We'll use this one's variable as a parameter to a different dataset query.<\/p>\n Next, we'll add a chart component that uses the dataset query, and a text label to describe the chart.<\/p>\n Finally, in Display Mode<\/em>, we will demonstrate how to limit the dataset query result set by typing a number<\/strong> into the Text Input control.<\/p>\n Note<\/strong>: This tutorial uses the Sample Data <\/em> data datasource and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n Filtering the dataset to limit the results that are used by the chart<\/p><\/div>\n There are three steps in this tutorial:<\/p>\n First, the dataset is described in the following section.<\/p>\n The dataset used here is called MiningDowntime<\/strong>, with the description: Select mining downtime data where the downtime hours are greater than input downtime hours<\/em>. This is in the Mining Data<\/strong> datasource.<\/p>\n To add or update a dataset, you need access to IFS OI Server Management. Read more about How to Write a Dataset Query<\/a>.<\/p>\n We will be using the Text Input to update the variable DowntimeHours<\/em> which we will assign to the dataset's DowntimeHours<\/span> parameter.<\/p>\n Related: Default Value<\/a>.<\/p>\n 1. Open the Default Values panel.<\/p>\n 2. Click Add<\/strong> to add a new default value.<\/p>\n 3. Type the variable name DowntimeHours<\/em> and select the Number<\/em> type. Type 0 in the value text box.<\/p>\n 1. Drag and drop a new Text Input component onto the top right grid cell.<\/p>\n Click the Text Input to configure it.<\/strong><\/p>\n 2. Select the new variable DowntimeHours<\/em> from the Variable Name<\/strong> drop-down list.<\/p>\n 3. Type Filter by downtime hours greater than.. (integer between 0 and 30)<\/em> into the Hint Text<\/strong> box.<\/p>\n Related: Chart<\/a>, Data Table<\/a><\/p>\n 1. Drag and drop a Text Label (from the Display<\/strong> group in the Toolbox) into the cell below the new Text Input.<\/p>\n 2. Drag and drop a Bar Chart (from the Chart<\/strong> group in the Toolbox) into the cell below the Text Label.<\/p>\n 3. Give the Text Label a Content<\/strong> of Downtime hours<\/em> and select a title Style<\/strong>, such as Page Subtitle<\/em>.<\/p>\n Give the Bar Chart's Data property a dataset:<\/strong><\/p>\n 4. Assign the MiningDowntime<\/em> dataset to the Chart's Dataset Query<\/strong>.<\/p>\n Allocate the Dataset Parameters:<\/strong><\/p>\n 5. Select the DowntimeHours<\/em> variable for the DowntimeHours<\/strong> parameter.<\/p>\n 6. Select the startTime<\/em> page variable for the StartDate<\/strong> parameter.<\/p>\n Configure the Bar Series to show the data:<\/strong><\/p>\n 7. Select DataColumn<\/em>, then DowntimeHours<\/em> for the Y Column<\/strong>.<\/p>\n Configure the X Axis:<\/strong><\/p>\n 8. Click X Axis<\/strong> to expand the X Axis properties, then select DataColumn<\/em>, then Entity<\/em> for the Column<\/strong>.<\/p>\nProperties of the Text Input<\/h2>\n
<\/a><\/p>\nTutorial 1<\/h2>\n
<\/a>\n
About the Dataset used to Populate the Data Table<\/h3>\n
declare @DowntimeComments varchar(100)\r\nset @DowntimeComments = ltrim(rtrim(PARAM(DowntimeComments, string)) )\r\nset @DowntimeComments = '%' + @DowntimeComments + '%'\r\n \r\nSelect Corporation, [Business Unit], Region, Area, Location, Entity, EntityType, StartDate, EndDate, DowntimeHours,\r\nDowntimeReason, DowntimeComments\r\nFrom SampleData\r\nWhere StartDate Between PARAM(StartDate, datetime) and PARAM(EndDate, datetime)\r\nand DowntimeComments like @DowntimeComments<\/pre>\n
Step 1. Prepare the Tutorial Page<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\nStep 2. Add a new Default Value<\/h3>\n
<\/a><\/p>\nStep 3. Add and Configure a Text Input Component<\/h3>\n
<\/a>\u00a0group in the Toolbox.<\/p>\n<\/a><\/p>\n<\/a><\/p>\nStep 4. Add and Configure a Data Table and a Text Label<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
<\/a> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<\/a><\/p>\nTutorial 2<\/h2>\n
<\/a>\n
About the Dataset used to Populate the Chart<\/h3>\n
select Entity, \r\n DowntimeHours\r\n from SampleData\r\nwhere StartDate = PARAM(StartDate, datetime) \r\n and DowntimeHours > PARAM(DowntimeHours, integer) \r\n order by DowntimeHours desc<\/pre>\n
Step 1. Add a new Default Value<\/h3>\n
<\/a><\/p>\nStep 2. Add and Configure a Text Input Component<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\nStep 3. Add and Configure a Chart and a Text Label<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n
![](\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/End-of-Tutorial-2.png\"){kind=link}