Web UI Common Elements

From Control Solutions IoTServer Documentation
Jump to navigation Jump to search

There are certain aspects of the Web UI that are common to many different pages. Rather than repeat that discussion many times, those common elements will be covered here.

Page Tabs

Web ui tabs.jpg

Many pages have tabs. In the example above, Read Maps is the active tab. Additional available tabs here are Write Maps, Walk Rules, Devices, and Config File. Click on any tab name to navigate to that tab.


Web ui show search.jpg

The "Show" number sets the number of items that will be displayed on the current page. If you are looking at Read Maps and this number is set to 10, you will see 10 maps listed per "page" (see below).

The Search box allows you to search for content on the current page. For example, if you are displaying a list of objects and you want to find an object by a certain name, simply start typing that name in the search box. The content of the page will be dynamically updated to show only matching content.

Note that this is not a global search of the entire system, nor of the Internet. This search applies only to content of the current page.


Web ui pagination.jpg

Very often, there will be more items to display than will fit on a single page. When this happens, the list is automatically split into pages of N items each where N is the number set in the "Show" window above. To navigate to the various pages, click on the page number, or click Prev or Next.

Next / Save / Prev Buttons

Snmp read map edit 9.jpg

Numerous map or rule editing pages will have these buttons. Click any of the Save buttons to save the entries you have made to the configuration database. Click Prev to move to the next lower numbered map or rule number if not already at #1. Click Next to advance to the next higher numbered map or rule. The "Save/Prev" and "Save/Next" buttons do both actions with one click. Click Exit to return to the main map or rule list page. Note that if you make changes but leave the page without clicking Save, your changes will be discarded.

Navigating the Sidebar Menu

A sidebar menu will appear on the left-hand side of every page. The sidebar menu is how you navigate among the various pages available in the web UI. Major menu items will expand to a list of sub-menus when clicked. Clicking sub-menu items will take you to that page. The page you are currently on will be highlighted in the sidebar menu.

Sidebar-1.jpg Sidebar-2.jpg Sidebar-3.jpg