1

Identify the Dropdown field where you would like to add Color. Example: AI: Status field.

2

Click on the Field Label to open the Field Info.

3

From the Field Info, click on the Table Name icon. This is a shortcut to access your V-Table list.

4

In the V-Table, Click on the Value ID representing the Value / Label where you would like to add color.

5

Click on the Color ellipses and point to your desired Color. As you click on your desired color, the HEX Color Code will update.

OR

If you know your HEX Color Code, then put the value in the box and press “Enter” on your keyboard. The selected Color will update to reflect the color of your code.

Press OK to select your color and OK again on the value.

6

You have now assigned a color to your V-Table Value.

7

Repeat this process for other V-Table Values where you would like to assign a color.

• Not all values require a color.

8

When finished assigning colors, close the V-Table and Field. Once back on the Trackor Grid page after closing out windows and refreshing your Grid, you will see your colors in your Grid.

What Trackor Types should be included?

Asset Trackor Type (grid view and detail view), Transaction (grid view and detail view)

Asset Trackor Type (grid view and detail view)

Should all the Trackor Types be visible or should some be hidden and slide open?

Auto-hide Transaction grid view

All visible

Do you need to add helper text/instructions? Should that be on a section that is collapsed or visible by default?

Add helper text on collapsed section that can be expanded

Add helper text that is visible by default

Do you want to make a custom Configured Tab for the Portal to help users focus?

Yes

Yes

What is the right layout based on the above?

Which Frames (windows) in your Layout selection will be populated with Trackors, Tabs, or other page types?

1

In the Menu, navigate to Dev Center > Build Applications > Portal View.

The screen will open the Portal View page.

2

From the Portal View page, press Add.

Enter a Name for the Portal page, and the same value in Description.

Set Scope field to Global.

3

Pick your Layout.

Press Apply to save and continue.

4

Click on the Frames tab.

This is where you assign Trackors to each Frame based on your selected Layout.

Tips:

• While you do not have to configure from top to bottom, we will start with the “A” Frame.

• Configure the Frames containing your Grid(s) first.

5

Click on Frame A or press Edit.

A new window will appear to configure the Frame.

6

Select the Type. In this example we select “Grid” as our Type.

Create a Name and enter the same in the Caption field.

Optional: Enter a Default Width value. This will auto-set the width of this Frame when viewed on the Portal.

7

Make a selection in the Grid Page dropdown. Options are E-File Browser, Task Details/View or Trackor Browser.

For the example, we select “Trackor Browser”.

8

Make a Trackor Type selection. Options will be system Trackor Types.

9

Assign a View – The Frame will reflect the View selected here.

https://onevizion.atlassian.net/wiki/spaces/USER/pages/2521530373/Working+with+Views#Adding-a-New-View

Tips:

• Create Views that are specifically catered for your Grid Frame to maximize and order for the limited space of the Portal.

• View assignment to the Frame can always be changed at a later time.

10

Assign a Filter. The assigned Filter will reflect the default within this frame of the Portal.

Assigning a Filter is not required.

11

Buttons Panel Selections –

Determine what options End Users have while on this Portal Frame by selecting Buttons for Quick Search, Add, Edit, etc.

These values can be updated and changed at anytime.

12

Press OK to complete your first Frame in the Portal

13

Click on Frame B or press Edit.

For this Frame, we will create a “Tab” Type of Frame.

14

Enter a Name for the Frame and enter the same value for your Caption Field.

15

Because this frame is a Tab Type, it needs a Parent Frame, where the user can select the record that is displayed.

• In this case, we select “Asset Items”. This builds the relation so the information on the Tab is based on the “Asset Items” Trackor Grid record that is selected on Frame “A”.

16

Press OK to save you Tab type Frame.

17

We will skip Frame C for now and return to it in future steps.

Click on Frame D or press Edit.

18

Follow the same steps for configuring a “Grid” Type Frame as reviewed above, but create for the Transaction Trackor Type.

19

Link to Parent Frame – For this Frame select “Direct Relation” and then select another Portal Frame (“Asset Items” in the example) as the Parent Frame.

This configuration will limit the visible records records so only Transactions that are a child relation to that Asset Item will display.

20

Complete the rest of the setup, selecting a View and Buttons Panel options.

For the example, we set the Frame to Collapsed by Default, which means that the User will have easy access to the information, but need to choose to expand it to view.

21

Repeat the steps to configure the remainder of your Frames.

In this example we are only adding Grids and Tabs in our selected Frames.

22

Press OK to complete and save the configuration of your new Portal Page.

The Checkout Portal page has been added to the Portal View page.

Additional Portals can be added as desired

1

In the Menu, navigate to Dev Center > Build Applications > Menu Item.

For more details on creating Menu Items and assigning to your Menu, please explore our earlier case study:

https://onevizion.atlassian.net/wiki/spaces/USER/pages/3068395521/Structure#Case-Study%3A-Menu

2

Press Add button and select “Portal” in the Item Type.

3

Update the Label of your Menu Item to reference the Name of your Portal Page. Example: Checkout Portal

4

Select the Portal Name.

• This is the name of the Portal Page created in the previous training segment.

5

Optional: Select an Icon for your Menu Item to represent the Portal.

6

Press OK.

7

Use the Up/Down buttons to navigate and position your new Menu Item within your Menu.

8

Refresh the Browser to see the applied Menu changes.

9

Click on the new Portal Menu Item and ensure the page loads as expected.

The Portal Page is now available to Permissioned Users.

1

Once latitude and longitude Fields are added to the Vizion Platform system, you can create a Coordinate Pair to link those fields together. Then you can add the Coordinate Pair to a Mapping page and view the geographical location on a map.

2

For this Case Study, we plan to see the Asset Items on a map based on their coordinates.

In the video, we will identify the coordinate fields at the Asset Items Trackor Type level and reference those fields to create our coordinate pair.

3

Identify the Coordinates Fields from the Asset Items Tracker and take note of them.

4

In the Menu, Navigate to Dev Center > Build Applications > Coordinate Pairs.

Click Coordinate Pairs to open the page.

5

From the Coordinate Pairs page, press Add.

6

Create a Name and Label for your Coordinate Pair and select your Trackor Type (ex: Asset Items).

7

Select your identified Lat and Long fields from the Asset Items Trackor Page.

Press Apply to create and save the Coordinate Pair.

8

Click on the Map Appearance Tab and configure your Coordinate Pair.

Select a Map Symbol and Color Legend Field (optional). Select Map Symbol Color.

9

Enter Label Format information as desired.

10

Press Apply to save, then click on the Map Info Window.

11

From the Map Info Window, select items you would like to display on the Map upon the user clicking on an Asset Item Map Location.

12

Press OK to save and close your new Coordinate Pair record.

Let’s move on to creating the Mapping Page.

1

In the Menu, navigate to Info Center > Data Views > Mapping.

Click on the Trackor Type Tree icon to open the Trackor Type list and select the Trackor Type. For the example, its Asset Items.

The Mapping page will open.

2

Now we want to assign the Coordinate Pair and select the left side Grid Columns.

Click on View Options and then Edit.

3

Click on the Coordinate Pair Tab.

4

Select the Primary Coordinate Pair.

Optional: If there are other Coordinate Pairs represented on other Trackor Types that are related via the Trackor Tree, they can be selected in the Arbitrarily Tab.

In the example, the Location Coordinate Pair represents the warehouse locations.

5

Click on the Grid Tab. Select Fields to display as Columns on the left-side Grid of the Mapping page.

Once item are selected, press OK.

6

Based on your assigned Coordinate Pair, the Mapping page display will update.

7

Navigate and Explore
Click on map icons. Notice the details that display per your selected Coordinate Pair configurations.

Review and adjust the selected columns on the left-side Grid.

8

When the adjustments are complete, proceed to Save your configurations as a Global View.

Create any desired Global Filters which will limit the return of records seen on the Map.

See the instructions from an earlier training section:

9

The map is complete. We have now configured the Mapping page to display Asset Items.

1

In the Menu, navigate to Dev Center > Build Applications > Menu Item.

This will take you back to the Equipment Checkout Menu page we configured earlier in the training course.

2

Select where you would like to add the new Menu Item.

In this example, we will select Top Menu so our new Menu Item will sit alongside Asset Items and Equipment Master.

3

Press Add and select “Mapping” in the Item Type field.

4

Enter unique Label Text, this is the value users will see on their Menu.

5

Select the Primary Trackor Type, Asset Items in the example.

6

Select the Global View, created in the last training segment.

7

Optional: Select an Icon to represent your Menu Item.

8

Press OK to save and create the Menu Item. The new Menu Item will appear at the bottom by default. Use the Up/Down buttons in the upper right corner to place your Menu Item to a desired location.

Tip: As seen in the video, you can pin the Up/Down buttons so they conveniently appear next to the other buttons.

9

Your Menu is now updated. Refresh the browser to see the changes.

After a refresh, you can click the new Menu Item.

10

Your updated Menu is now ready and available for End Users.

1

In the Menu, navigate to Dev Center > Build Applications > Date/Time Fields Pair.

Clicking this will open the Date/Time Fields Pair administration page.

2

Click Add in the Command Bar.

This opens the Add Date/Time Pair window.

3

Enter the details.

Pair Name: Since this is check in/out for transactions, we name it Asset Transactions.

Pair Name Label: This is the same as a Pair Name, with an underscore instead of a space.

Trackor Type: Here we select the Trackor Type where the dates are. In the example, this is Transactions.

4

These details can be updated after viewing on the calendar.

Primary Title: This is what will show on the calendar view. Since we want to know what asset the dates are for, we select Asset Name.

Secondary Title: Also displayed on the calendar, below Primary. We will want to know who has equipment, so we select Assignee.

Color Field: Let’s come back to this.

Icon: Select an icon from the list or upload your own. We selected book.

Start Date: Options here will be limited to date fields on the selected Trackor Type. For the example, the start date is Check OUT.

Finish Date: Options here will be limited to date fields on the selected Trackor Type. For the example, the start date is Check IN.

5

Click OK to create and save your Date/Time Pair.

1

In the Menu, navigate to Data Views > Calendar.

The last visited Calendar will be listed under “Calendar View”. If this the desired Calendar, click Calendar View to navigate there.

In this case, we want to view the Transaction Calendar. To get there, click on the Trackor Type Tree button next to Calendar View.

This opens the Calendar View tree. Click on the Trackor Type name to navigate to that Calendar. In this example, we click on Transaction.

2

Since the Calendar has not been configured yet, it displays a message - “No Date/Time Pair selected in the View Options form”.

3

To display a Date/Time Pair, navigate to the Command Bar, open the View, and click Edit.

The options will be Date Pairs. Since there is only one in the Equipment Checkout App, we will select it and move it to the right, then click OK.

4

This will navigate back to the Calendar with the Date/Time Pair displayed.

In the example, there are too many Transactions on each day, so we can click View More Events to drill down to a single day.

In addition, change the display by selecting Day, Week or Month from the dropdown next to the Quick Search in the Command Bar.

The side panel shows the details we selected when setting up the Date/Time Pair - Asset Name and Assignee.

5

Save the view to make it easy to navigate to again.

6

To make the dates pop, let’s go back and add color to the Date/Time Pair.

Navigate to the Date/Time Pair page, highlight the pair, and click Edit.

7

Click the ellipsis on the Color Field.

The selector that opens includes fields on the Trackor Type that have color in the V-Table.

In this case, select Transaction status, where the color varies based on the status.

8

Navigate back to the Calendar to see that fields are now red/pink when the status is “Checked Out” and blue when the status is “Checked In - Complete”.

9

After the Calendar is configured, save the View and Filter.

For the example, we will save a Filter for Assets with a “Checked Out” status. This way the calendar will only display items that are currently out and will provide a visual on when to expect them back.

10

As done previously, edit the Menu to add a direct link to the Calendar.

Select Calendar View as Item Type and make other appropriate selections.

It is also an option to Hide View and/or Hide Filter controls. This will prevent Users from changing the View and Filter when navigating to the Calendar from the Menu item.