{"id":15387,"date":"2016-06-09T11:38:54","date_gmt":"2016-06-09T03:38:54","guid":{"rendered":"http:\/\/localhost\/help\/?p=15387"},"modified":"2017-02-01T11:18:28","modified_gmt":"2017-02-01T03:18:28","slug":"feature-preview-explorer-table-layout","status":"publish","type":"post","link":"https:\/\/oihelp.corporate.ifs.com\/help\/feature-preview-explorer-table-layout\/","title":{"rendered":"Feature Preview: Explorer Table Layout"},"content":{"rendered":"\n

Explorer 4.4.1 introduces two controls in Explorer Studio to take your page building to the next level!\u00a0The Hierarchy Navigator and Table Layout (formerly known as Dataset Repeat)\u00a0allow Page Designers to create\u00a0a page control which iterates over\u00a0the children of a node in the hierarchy. In this post, we will go through a tutorial on how to use these new components.<\/p>\n

Step 1 - Configure the\u00a0Hierarchy Navigator<\/h2>\n

The aim of this tutorial is to set up a page where a user can choose a field and then the table shows the details of the Wells under that field. We have already configured an Entity Selector<\/a> which is filtered to show entities of type 'TField', as follows:<\/p>\n

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

We have also defaulted the selectedEntity<\/strong> to 'TField 1<\/em>' and placed a Time Range Picker<\/a> on the page with default configuration. The\u00a0page looks like this.<\/p>\n

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

Next, we add a Hierarchy Navigator by selecting the new 'Triggers<\/strong>' button on the Studio tab of the Ribbon.<\/p>\n

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

And then clicking on Add<\/strong> next to the Hierarchy Navigators.<\/p>\n

We then configure the Hierarchy Navigator as follows.<\/p>\n

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

This setup means that the control will work out the children immediately under selectedEntity<\/strong> in the hierarchy 'Test Time Series Hierarchy<\/em>' that match the reporting structure 'TestHierarchyReportingStructure<\/em>' (this has been defined in web.config) and populate the variable childEntities<\/strong>. Essentially, childEntities<\/em> will be populated with all entities of the type TWells<\/em> under TField1<\/em>.<\/p>\n

To test the hierarchy navigator, place a Text Label<\/a> onto the page and configure it to show an Entity List of childEntities<\/em>, like so.<\/p>\n

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

You will see if you change the selectedEntity<\/strong> in the Entity Selector to TField 2<\/em> that it updates the variable.<\/p>\n

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

 <\/p>\n

Step 2 - Add your Table Layout (Dataset Repeat)<\/h2>\n

Delete the Text Label you added in the previous step.<\/p>\n

Now we are going to add a Table Layout and select some Time Series Data to iterate over (the control can also iterate over a Dataset). For this scenario we want to do a single point fetch as we only want to iterate over each Entity once (one row per Entity). We want the\u00a0table to show the Oil and Gas Alloc\u00a0for each well (as well as the forecast).<\/p>\n

Add the Table Layout to the large\u00a0grid cell. Using the Data Selector<\/a>, configure the Data for the Table Layout as follows.<\/p>\n

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

Notice that we have set both\u00a0the Start Time and End Time parameters to be endTime<\/em>, which\u00a0will create a Single Point Fetch<\/a>.<\/p>\n

You will also notice that the Table created some columns based off the original fetch as placeholders. For the purpose of this tutorial, delete all columns except for the 'Entity<\/em>'\u00a0column.<\/p>\n

Now, add a new column with the title Oil Alloc<\/strong>.\u00a0<\/p>\n

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

We want to use a Data Label<\/a> which shows the Oil Alloc<\/em> column from the Dataset, so on the canvas, drag and drop a Data Label into the new column:<\/p>\n

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

Using the Data Selector, configure the Data Label's Value\u00a0<\/strong>to look at the '[Oil Producing Well]:Alloc Oil!Actual<\/em>' column. You will see that a new button<\/strong> \"Table<\/a>\u00a0is available next to the Variable icon. This button allows you to get data in the context of the Table Layout - from those attributes specified in the Table Layout component.<\/p>\n

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

So let's recap what we've done so far.<\/p>\n