How to edit pages?
You can customize the pages that you and your users can see in the Portal app. This way you can fully tailor your X4 Remote to the functions that you need. When editing one of these pages you can add components and style the page as you see fit. You can edit your custom pages in our custom device page editor.
Use the links below for easy navigation.
Add a component
After creating a page, you need to add components. You can remove or add additional components whenever you want. Please follow the steps described below to add a component.
- Go to the Studio which is accessible from the Apps menu in the top right corner if you are currently in a different X4 Remote app.
- Open the main menu, go to Pages, then press the name of the page you would like to add a component to, or make a new page.
- Click on [add a component] and choose the component you would like to add. The table below gives an explanation about your options.
| Component | Description |
|---|---|
| Device Info | General information about the device, serial number, active firmware version and groups of which the router is part. |
| Remote Access | A list of all services (like VNC or HTTP) that you can connect with for the applicable device. |
| VPN Connect | This component can be used to connect to the applicable device with a VPN connection. |
| Event Log | You can see what user did what with the device this component is shown on. You can even search for a specific event or export the event log. |
| Cloud Connection Status | You can see whether your device is connected to the cloud. You can also see how much data your VPN connection is using in this component. |
| Text note | This simple component lets you add text on your custom page. |
| Image | This simple component lets you add an image on your custom page. |
| Single Value (live and historical) | You can use this component to show a single value of a PLC when you use cloud logging. |
| Data Table (historical only) | You can use this component to show a table with PLC data you use cloud logging. |
| Line Graph (live and historical) | You can use this component to show a line graph with PLC data when you use cloud logging. |
| Period Barchart (historical only) | You can use this component to show a barchart with PLC data of certain time period when you use cloud logging. |
| Statusbar (live and historical) | This component displays the value of a single data tag over a certain time period when you use cloud logging. |
| Gauge (live and historical) | This component shows the value of a data tag as a gauge when you use cloud logging. |
| Tank (live and historical) | With this component you can visualize Cloud Logging data as the content of reservoir when you use cloud logging. |
Remove a componentIf you don't want to use a component, you can easily remove it by clicking on the component with a right mouse click and then clicking on [remove component].
Shape the appearance of a page
When you have added the desired components to your custom device page you can shape the appearance of the page. You can change the size and location of all components. Additionally, you can preview the dashboard for all devices in both desktop and mobile view. This allows you see what the effect of certain settings is for any individual device.
Page previews
Please follow the steps described below to preview a page.
- Go to the Studio which is accessible from the Apps menu in the top right corner if you are currently in a different X4 Remote app.
- Open the main menu, go to Pages, then press the name of the page you would like to edit, or make a new page.
- Click on [select device for preview] on the top left side of the editor page of your custom dashboard and click on the device you want to preview.
- Choose whether you would like to preview the desktop page or the mobile page on the top right side of the editor page of your custom dashboard.
Change position and size of components
Please follow the steps described below change the position and size of components.
- Go to the Studio which is accessible from the Apps menu in the top right corner if you are currently in a different X4 Remote app.
- Open the main menu, go to Pages, then press the name of the page you would like to edit, or make a new page.
- Drag the components on the page to their desired position and use the edges to change their size.
Publish changesChanges to the draft will be saved automatically. The changes will not be published until you [Publish] the page
Page options for Cloud Logging
When you use cloud logging, you have a few extra setting to take into account. Please follow the steps described below to set up cloud logging in your custom device page.
- Go to the Studio which is accessible from the Apps menu in the top right corner if you are currently in a different X4 Remote app.
- Open the main menu, go to Pages, then press the name of the page you would like to edit, or make a new page.
- Select what time period you want to show by default. You can also choose to show the time period picker in the portal, to make sure that all users can change the time period of all the logging components in the Portal.
- Click on [select device for preview] and choose the device that is connected to the data source that you want to configure.
- Click on a logging component, and fill the Input fields. The table below describes the common input fields for cloud logging components.
| Title | (optional) Here you insert the name you want to give to the component | |
| Subtitle | (optional) You can also add a little more detailed description as a subtitle. | |
| Aggregator | Because a time-period contains multiple logged values, you need to select a way to display the values in the time-period. This is called aggregation. You have have the following options to aggregate values: | |
| Max | Shows the minimum logged value in the displayed time period. | |
| Min | Shows the maximum logged value in the displayed time period. | |
| Mean | Shows the average of all the logged values in the displayed time period. | |
| Median | Shows the middle logged value in the displayed time period. | |
| Sum | Shows the sum of all the logged values in the displayed time period. | |
| Count | Shows the amount of values logged in the displayed time period. | |
| Range | Shows the difference between the minimum and the maximum logged value in the displayed time period. | |
| First | Shows the first logged value in the displayed time period. | |
| Last | Shows the last logged value in the displayed time period. | |
| Tag | You can add the data tag or data tags you want to display for the selected device in this field. | |
| Decimals | (optional) You can select the amount of numbers you want to display after the decimal point. | |
| Unit | (optional) With this field you can describe the unit. | |
| Factor | (optional) When you enter a value here, the logged value is multiplied with the entered value. | |
| Y-axis | (Not for all components) Choose a minimum and a maximum value for the y-axis. The axis will scale automatically based on the values if you leave these fields empty. | |
| Color | (Not for all components) You need to select a color for certain graphic elements of visualization components. | |
| Legend | (Not for all components) You can add a legend that explains what the colours in a component mean. | |
Component specific fields
Some Cloud Logging components require some additional information on top of the fields described in the table above. These extra requirements are discussed for every applicable component:
- Data Table: You can choose to fill empty cells with predicted values based on nearby logged values.
- Period Barchart: This component requires you to select the interval for which you want to show bars. You can also choose whether you want tot see bars next to each other or on top of each other by selecting the stacked as the bar style.
- Statusbar: To determine what to display, this component needs you to set one or multiple rules. You can do this by setting an operator (e.g. greater then >) and a value that applies to the operator.
- Gauge and Liquid Tank: For these components you need to set a minimum and a maximum value to determine the borders of the component. Optionally, you can also set thresholds within this range to create a coloured area for a certain value.
Publish changesChanges to the draft will be saved automatically. The changes will not be published until you [Publish] the page.