Custom websites and management information systems in mWater are called Blues. These allow you to bring together pages from the portal in any configuration that works for you. You also control how the navigation of this site works, so you can configure the navbar for the whole site. You control which individual pages show up where and who can access them. You can bring pages from within the portal or from elsewhere online. You can also translate the interface of Blues into other languages and control some styling. Finally, having a custom website built on Blue technology allows you to work with us to build very customized components that go beyond the capabilities of the portal.
Quick reference: Adding and editing Pages step-by-step
Step 1) Go to the Admin page of your Blue from the dropdown on the top right.
Step 2) Go to the Pages tab on the left.
Step 3) Add a new Page or edit an existing one.
Step 4) Fill out the Page details:
Label - what the user sees in the navbar
Path - URL path of the page
Destination - Content of the Page. Typically a URL from the Portal like a Dashboard, Console, Map, Datagrid, Survey page etc.
Step 5) Save and Publish to make the changes live.
Step 1) Login to the Admin view from the User menu on the top right
The Pages interface
Adjust the Page details as needed.
The Blue Management Interface
A detailed view of the Blue Management Interface.
Access the Admin view from the top right dropdown.
To get to the Blue Designer view , go to your Blue website, log in and then open the Admin page from the drop-down at the top right.
The standard Blue Designer page has a navbar on the left with the following options:
- Save. This saves any unsaved changes.
- Publish. This button publishes the current saved version of the Blue. Users need to reload their browser pages to see the changes.
- Welcome. Contains an introduction to the design area which explains the key concepts of the system.
- Pages. Here
you can set which paths on your website lead to which pages. You can
control your own navbar and other pathways to any page such as a survey,
dashboard, console, map or more.
- Settings. Here you can set the settings of your blue, the navbar theme, the standard currency, your brand image and an optional Google Analytics ID to track usage.
- Localization. Use this page to define the languages that are available for your website.
- Permissions. Here you can set the overall permissions for your blue config. You can say which users are allowed to log in in general. To set view permissions for individual pages use the Pages section.
- History. Here you can see which user made a revision and when. It does not show the contents of that revision.
- Preview. Take a look at what the current version of your blue configuration looks like.
The Pages-interface Allows you to configure the pages that make up your website. Pages themselves will appear in the header navbar on the site, from left to right in the order that they're displayed here.
Other routes are pathways to places on your website that do not show up in the header navbar, but if you enter the full path as a URL you will end up on that page.
This isn't visible in the navbar but the URL takes you to a map page.
Page Configuration
The page configuration view has five areas of interest: the Label, Path, Destination, Advanced and optional Dropdown Items.
The Label is how the page appears in navigation. So labeling your page "Homepage" will show up as that in the navbar.
The Path is the second part of the URL of the page. The first part is always the domain of your website followed by /#
So for our Blue Demo site we have the domain https://bluedemo.mwater.co and the homepage path is "/" so the full URL is https://bluedemo.mwater.co/#/
A Path of /contact in the Blue Demo site will create a page at https://bluedemo.mwater.co/#/contact
For your Blue it will be: https://bluename.com/#/contact
Note that the path must start with a slash and contain no spaces.
The Destination determines what the user will see when they go to the page you create.
The simple way to add the destination is to simply paste a full URL from the mWater Portal or some other website into the field and press Enter.
The system will automatically recognize if it's a dashboard, map, datagrid or console and respond accordingly. It will even handle share links correctly. You can bring pages from elsewhere on the internet as well, as long as that target site allows embedding.
Entering a label, path and URL from the Portal
Depending on the added destination you can toggle options. So for example for dashboards you can hide the dashboard controls like undo, redo and printing to make the view cleaner.
Advanced view of a console share link
mWater links to Pages consist of a number of components you can understand. The links are long because they contain unique IDs that are computer-generated
You can see the Console ID, the Share ID and the Initial tab IDs all read into the Page configuration in the adjacent image.
The options for Advanced Mode entries include Widgets. These are custom-made components built by mWater specific to you Blue and can have advanced features beyond what consoles and dashboards provide.
Advanced Page Options
Pattern. This is an advanced option for when the destination is a Widget, a custom component created by mWater.
Require Login. This is an important option for permissions management. Here you can override the website wide permission settings and require login for separate groups on a page by page basis. You can also choose to hide the page from users who are not part of the permission group. In such a case the page will not show up in the navbar for such users.
At the bottom of the page configuration page, you can choose to add drop-down options. These are pages that can be navigated to by hovering over the navbar and then clicking the drop-down item. Configuring these works the same as configuring other pages.
Dropdown pages
Settings
With the Settings tab, you can make changes to some overall settings for your website. You can change the title.. You can change the theme coloration of the navbar to be light, dark or blue. You can choose the currency for formatting.
Localization
With the localization tab you can define languages that are available for localizing the site. If there is more than one language, a user will see a drop-down on the top right of the navbar. Translations work similarly to how they do elsewhere in the platform. You can download a spreadsheet file, update the translations and then upload it again, or you can use AI for auto-translation.
Permissions
The permissions tab is where you can set permissions that apply across your Blue configuration website. Remember that you can override these permissions on a page-by-page basis with the page level settings.
The main decision to make is who is allowed to edit the blue configuration. Editing widgets is reserved for mWater staff.
By default, anyone can come to your website and see the pages. If you are embedding pages from the portal, normal permission restrictions apply. However, if you want users to log in using their mWater credentials to view pages, you can toggle this on from the permissions tab.
History
The history tab is intended as a way for you to see when the blue configuration was modified and by who. individual changes that were made. However, if you want to roll back your blue to an earlier state, you can contact us directly at info@mwater.co.
Widgets
Widgets are a term for advanced custom features that we can develop as needed in partnership with you. The editing interface is only open to the mWater by default. Over there is a very large set of things that can be done, including custom coding.
This includes custom landing pages, advanced drill downs and interactivity. If you want to make use of custom widgets or update existing ones, please contact us at info@mwater.co.
