Building An Explorer Page

One of the most useful things you can do in Explorer is build a page. There are many types of pages you can build, from dashboards to schematics to mimics. In this article, we'll show you how to build a page from scratch.

This video shows how you can build a page in less than 5 minutes.

The steps below explain this process in detail, and provide some tips and best practices. 

 


Part 1. Creating the Page

Pages are created using Explorer Studio, which opens automatically when you create a new page or edit an existing one. 

To create a new page, click the New Page button on the Home tab of the ribbon.

New Page button on ribbon

Choosing the Layout

Explorer Studio opens and you are presented with various layout options. The layout types are Grid, Precision, and Blank.  

  • Grid: Lay out the elements of your page in a grid format. Each component will fill the entire grid cell.
  • Precision: Place components anywhere on a page and make them any size.
  • Blank: Allows you to only add a single component to the page.

Read More: Tour of Explorer StudioGrid Layout tutorial, Precision Layout tutorial

 

TOP TIP

You can nest layouts, allowing you to achieve some complex designs.

 

In this tutorial, let's select the grid layout. Grid layouts work well with most browser sizes.

Grid Layout 4.4

Click anywhere on the canvas to open the editor for the grid layout. This appears on the right side of the screen. Configure the grid to have 2 columns and 3 rows.  

buildinggrid

TOP TIP

You can find detailed help on a component by clicking the helpicon help icon in the top right of the component editor.

 

Exploring Studio

At this stage, it's worth familiarising yourself with the Studio ribbon and toolbar. Both contain various functions for editing a page. 

Save your page by clicking the Save saveicon1 button on the toolbar. Save your page with the name "Building a Page".

Read More: Saving Your Page

Let's Explore!

Before we move on to the next step, let's take a quick look at the page properties, as we will be coming back to this later. In the ribbon, click the page properties propertiesicon button.

At the end of this tutorial, we will update the description and upload a thumbnail. However, it is worth noting here that if you want to build a page of a certain size, this is where you can enter the dimensions. This allows you to define when scrollbars appear when the browser is resized, and is useful for making sure your page elements remain readable.

 

tut-properties1

 

Read More: Page Properties

 


Part 2. Adding a Component

Let's start building the page by adding a simple component to the page: the Text Label. This is commonly used for page titles, subheadings, and other text on a page.

The Text Label is a component in the Display group, indicated by the Display Display group icon icon. You can find a component in the toolbox in 3 ways:

  • Scroll down the component toolbox until you see it.
  • Use the search box Search components at the top of the component toolbox.
  • Click one of the group icons  to jump to the relevant group.

Drag and drop the Text Label from the component toolbox to the grid cell at the top left of the canvas.

After dropping a component onto a page, you need to configure it in the component editor on the right of the canvas.
With the Text Label, all you need to do is type some text into the content box.

  • In the Content box, type: Building a Page
  • The Text Label comes with several style options, and one of these is a page title. So from the Style drop-down list, choose Page Title.
    Note that not all components come with predefined styles.

Read More: Text Label tutorial

The first part of your page is done!

 


Part 3. Exploring the Canvas

While you are designing your page, you will be using the canvas a lot, as this is your main work area. It's worth familiarising yourself with 3 main functions that will help you to work faster:

Undo/Redo

Undo redo

 

Undo

Click to undo the latest change. You can also use the keyboard shortcut CTRL+Z

You can click repeatedly to undo previous changes, or click the downward-pointing arrow to select how far back you want to go. The different steps are listed from most the recent activity.

Redo

Click to redo the latest change. You can also use the keyboard shortcut CTRL+Y

You can click repeatedly to redo previous changes, or click the downward-pointing arrow to select how far back you want to go. The different steps are listed from most the recent undo action.

Preview vs Finish and Open

As you design your page, you will probably want to know what it looks like to your users. There are 2 ways of doing this: Preview or Finish and Open.

Preview vs finish and open

Preview

Click the Preview button above the canvas to see how your page will look in run timeWhen previewing your page, you can also interact with all the elements on the page, as if you were in run time. While you are previewing the page, you remain inside Explorer Studio.

Click the Preview button again to make further changes to the page.

livemode Finish & Open

Click the Finish and Open button on the component toolbar to save the page first, and then open it in run time.

 

Cut/Copy/Paste

The familiar cut, copy, and paste functions are available on the component toolbar.

Cut copy paste

They are context-sensitive and are therefore only enabled when you are able to use them. You can also use the standard keyboard shortcuts for these functions:

cuticon
Cut CTRL+X
copyicon
Copy CTRL+C
pasteicon
Paste CTRL+V

 


Part 4. Adding Data

Now that we're familiar with the basics of Explorer Studio, let's add some real data to the page.

Read More: Explorer's Data

We're going to add a component that is commonly used to display data: a data table.

First, let's add and configure the Data Table component.

1. Drag and drop the Data Table from the component toolbox to the grid cell below the page title.

2. Configuring any component that retrieves data is done by using the Data Selector. The Data Selector is a sub-component which allows you to retrieve all sorts of data. You can tell when the Data Selector is available by this input box: Click to configure data selector

Clicking the box opens the Data Selector:

Data Selector

When the Data Selector is first opened, you will see 5 tabs. Sometimes, depending on the component, you only be able to choose from a subset of the tabs. In this case, as the component is expecting tabular data, the Value tab is unavailable, and the Dataset tab is active.

Read More: Data Selector

 

For this tutorial, we want to get data from the OilDowntimeByReason dataset query.

  • In the Dataset Query box, type: OilDowntimeByReason
    Notice that as you type, the matching queries from P2 Server are displayed. You can select the query from this list if you wish.

After you've typed the query name, the dataset parameters for the query are displayed. You need to complete all of these queries to retrieve data from the dataset.

Data Selector dataset parameters

These parameters can either be a static value or variables. Initially, they will be set to use static values, as indicated by the selected icon to the right of the fields.

Icons for variables

We want to use variables, however, so go ahead and click the variable icons for each of the parameters. Using variables will allow us to create a more dynamic page (we will elaborate on this in the next section).

P2 Explorer provides a number of commonly used variables by default. We are going to use two of these here, for the EndDate and StartDate parameters. In the drop-down list for each parameter, only variables of the appropriate data type are presented. 

For each of the dataset parameters, select the appropriate variable, as follows:

  • EndDate: endTime
    This is supplied by default, so select it from the drop-down list.
  • EntitiesList: selectedEntities
    This is not supplied by default, so you will need to manually type it in.
  • StartDate: startTime
    This is supplied by default, so select it from the drop-down list.

Dataset parameter variables

When you have finished, click the Preview button at the bottom right of the Data Selector. 

Dataset preview

This is the data that you will see in the Data Table after you have finished configuring it. To finish configuring the Data Table, click somewhere outside of the Data Selector. We're going to take the easy way out and display all the rows and columns in the data table. We do this by clicking the Autofill button:

Data Table autofill

You will now see the Data Table contains the same data as shown in the Preview window:

Data Table on Page

Read More: Data Table tutorial

Now you have some data on your page!

 


Part 5. Variables

Variables are the key to creating dynamic pages, where users can pick and choose things like the date or the entity they are interested in. In this example, we will get the user to choose which downtime reason they are interested in.

Read More: Variables

We'll start by adding an Option Links component, which is a common component that is used to allow users to select different options. 

Adding the Option Links

The Option Links is a component in the Control group, indicated by the Control Controls icon. 

Drag and drop the Option Links from the component toolbox to the grid cell at the top right of the canvas.

Adding option links

We will now configure the option links to display all the downtime reasons, so the user can choose which one they want. We do this by using the Data Selector for the Option Values field.

  • Open the Option Values Data Selector by clicking on the field. You will notice that the Values tab is automatically selected. Now, we could type in our values manually, but it will be easier to pull it directly from the dataset.
  • Click the Dataset Dataset icon tab in the Data Selector. Fill in the fields as follows:
    • Dataset Query: OilDowntimeByReason
    • Value Column: DowntimeReason
      Notice that the Value Column offers you a drop-down list with the names of all the columns available. 
    • The Dataset Parameters are not relevant on this occasion, so you may leave them blank.

Option Links showing downtime reasons

Click away from the Data Selector. 

There is one important thing to notice here, and that is the Selected Option variable. This is where the value of the user's selection is stored, when they click an option. 

We will be making use of this variable in the rest of this tutorial.

Option Links Properties

There's no need to fill in any other properties for the Option Links. 

Read More: Option Links tutorial

 

Adding a Data Label

Next, we will add a Data Label. This will give us the number of downtime incidents for the reason that the user selects.

Drag and drop the Data Label from the component toolbox to the grid cell at the top right of the canvas.

Add Data Label

We will now configure the data label to display the downtime hours for the selected downtime reason. We do this by again using the Data Selector for the Value field.

  • Open the  Value Data Selector by clicking on the field.  
  • Click the Dataset Dataset icon tab in the Data Selector. Fill in the fields as follows:
    • Dataset Query: OilDowntimeByReason
      Tip: Click the Preview button so you can see the dataset, it will help you to better understand the data you are dealing with.
    • Filter Column: DowntimeReason
      This is the column that provides the options for the filter, which the user will select. 
    • Filter Value: selectedOption
      Click the variable icon and choose this from the drop-down list. This is the variable that stores the user's selection from the Option Links.
    • Value Column: SumDowntimeHours
      This is the column that provides the value that corresponds to the selected option.

Data Label filters

  • For the Dataset Parameters, choose the corresponding variables, which will be the same ones you used in the Data Table.
    This is important to make sure you are getting the same numbers as what is shown in the Data Table. If you don't specify these parameters, they take on the default values for the dataset as it was defined in P2 Server.
    Note that because you have already manually added the selectedEntities variable, this is now available for selection from the drop-down list.

Click away from the Data Selector.  There is no need to fill in the rest of the properties for the Data Label.

Read More: Data Label tutorial

 

Adding a Pie Chart

Finally, we will add a Pie Chart. This will do 2 things: it will provide another way for the user to select a downtime reason by clicking on a segment of the pie, and it will also reflect when a user selects an option from the Option Links. It also provides a bit of visual interest to the page!

Adding a pie chart

We will now configure the pie chart to display the downtime hours for the selected downtime reason. We do this by again using the Data Selector for the Data field.

  • Open the Data Data Selector by clicking on the field.  
  • Click the Dataset Dataset icon tab in the Data Selector. Fill in the fields as follows:
    • Dataset Query: OilDowntimeByReason
    • EndDate: endTime
    • EntitiesList: selectedEntities
    • StartDate: startTime

piechartdata

Click away from the Data Selector.  Fill in the rest of the properties for the Pie Chart as follows:

  • Name Column:  DowntimeReason
    This is the column that contains the values that will be used as the labels of each slice (i.e. the legend).
  • Value Column: SumDowntimeHours
    This is the column that contains the values that will be represented as a slice of the pie.
  • Selected: selectedOption
    This will hook into the Option Links.

Pie Chart Properties

Read More: Pie Chart tutorial

 

More on Variables

There are a few more things worth noting about variables.

A number of variables are always added to a page by default. These are:

  • selectedEntity
  • pageSampleMethod
  • pageSampleInterval
  • startTime
  • endTime
  • confidenceThreshold

Some components have their own variables that can also be used by other components, such as the selectedOption variable we used just now. These are not added to the page defaults, you will need to manually specify the default values.

The most useful/popular components that use variables to change user selections include:

Read More: Variables

 


Part 6. Finishing off the Page

Before we can call our page done, it is best practice to make a couple of final checks.

BEST PRACTICE

Assign Page Defaults and complete the Page Properties before finishing off your page.

 

Page Defaults

Page defaults allow you to set the initial values of your variables so that when a user opens the page, they see a useful view of the page data.

Click the Defaults defaultvaluesicon button in the ribbon.

First, we need to update 2 variables: 

  • endTime: This is initially set to today's date. You can change it if you want, but it's OK to leave it for this exercise.
  • startTime: This is initially set to one week before today. You can change it if you want, but it's OK to leave it for this exercise.

Then, we need to add 2 new variables:

  • Click the Add button twice.
  • Add the variable called selectedEntities, with a type of EntityList. Type in the following entities, pressing the Enter key after each one: Big Red, Archer, Ibis.
  • Add the variable called selectedOption, with a type of Text. Type No Issues into the box.

You should see the page update to reflect the new data and selected option.   

 

Page Properties

In the ribbon, click the Properties propertiesicon button.

There are 2 sections you should fill out: Description and Thumbnail.

For the Description, type a short sentence on what this page is used for.

For the Thumbnail, take a screenshot of your page in run time (you can use the Preview Preview Button button), resize it to 414x262 px, and upload it.

Page properties with thumbnail

Finally, click the Finish and Open livemode button and your page is complete!

Now, click around on your page and observe the changes in the Option Links, Data Label, and Pie Chart components.

BuildingAPage

Well done! You have completed the tutorial on building a page in Explorer. Look through the complete list of components to find more ways you can build a page.

Comments are closed