How to edit cards?
You can customize the cards that you and your users can see in the Portal app. This way you can fully tailor yourX4 Remote to the functions that you need. When editing one of these cards you can add components and style the car as you see fit. You can edit your custom cards in our custom device car editor.
Use the links below for easy navigation.
Add a component
After creating a card, 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 Cards, then press the name of the cards you would like to add a component to, or make a new card.
- 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 Card Header | Header with the name, location and status of the device |
| Device Card Actions | A list of VPN and all services (like VNC or HTTP) that you can connect with for the applicable device. |
| Image | This simple component lets you add an image on your custom card. |
| Single Value | You can use this component to show a single value of a PLC when you use cloud logging. |
| Statusbar | This component displays the value of a single data tag over a certain time period when you use cloud logging. |
| Gauge | This component shows the value of a data tag as a gauge when you use cloud logging. |
| Liquid Tank | With this component you can visualize Cloud Logging data as the content of reservoir when you use cloud logging. |
No access categoryCustom device cards cannot be assigned to an access category and will therefore be visible for everyone who has access to a device. This includes Cloud Logging information if Cloud Logging components have been added.
Shape the appearance of a card
When you have added the desired components to your custom device card you can shape the appearance of the card. 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.
Card previews
Please follow the steps described below to preview a card.
- 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 Cards, then press the name of the card you would like to edit, or make a new card.
- Click on [select device for preview]
on the top left side of the editor card of your custom dashboard and click on the device you want to preview. - Choose whether you would like to preview the desktop card or the mobile card on the top right side of the editor card 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 Cards, then press the name of the card you would like to edit, or make a new card.
- Drag the components on the card 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 card.
Card 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 card.
- 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 Cards, then press the name of the card you would like to edit, or make a new card.
- 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:
- 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 card.