UPCOMING WEBINAR: DIY Data Cleaning & Prep: Super Fast, Super Good When designing a report or dashboard, there are elements of the design that you should consider before beginning to avoid rework later on. There are lots of different ways of customizing online reports/dashboards, in terms of both functionality and appearance. This article describes the following:
The appearance of tables and visualizations
Add Shapes, Images, and other Design Elements
More advanced customization via the CSS
The appearance of tables and visualizations
There are many ways of customizing tables and visualizations, by modifying the data, how the data is calculated, styling, rules, visualization types, and so on. As an example, compare the two dashboards below.
See Create and Customize Tables and Data Visualization for more information.
Navigation
Navigation refers to how a user moves between pages in a document when in view mode. You can customize navigation by:
- If using a navigation pane, by:
- Creating folders, by dragging pages onto other pages or via the + menu in the Report tree.
- Hiding pages, to remove the Page from the Dashboard, see How to Hide and Unhide Items.
- Hiding the navigation pane, which is the list of pages shown on the left side of a document. This is hidden by clicking
> Publish to web > Advanced Options > Hide navigation pane and then Publish/Republish.
- Creating links to published pages (i.e. those that are not Hidden via the menu in Edit Mode). Note that if you hide the navigation pane, you will need to create links within the design of your Dashboard to be able to navigate the Report in view mode.
Filters
Filters created when editing a document are available when the document is being viewed.
Additionally, controls can be added to pages. For example, a combo box is shown below.
See Create and Apply Filters for more information.
Controls
In addition to being used to filter data, controls can be used to create other forms of interactivity, such as changing which data is viewed and creating simulators. See Work with Controls for Interactive Outputs for more information.
Explore mode
Explore mode allows viewers of online reports/dashboards to create their own tables using the raw data. See How to Enable Explore Mode.
Page master template
Like the Slide Master in PowerPoint, you can use the Page Master to customize page layouts to use as templates when creating your Report. In it, you can add background images, set default colors, and customize text boxes and fonts, see How to Create a Template Document. You can even save these configurations as templates that you can reuse in other documents, see How to Add Your Own Document Template to the Gallery.
Add Shapes, Images, Media, and other Design Elements
You can add other design elements to improve the readability and format of your dashboard, see our Add Shapes, Icons, Images, and Symbols section for further examples. You can insert and format static Text boxes even inside shapes and callouts. Inserting custom dynamic text boxes and sample size descriptions enables you to create commentary that updates alongside your data. Given outputs on a page, you can arrange and align them automatically. You can also Hide individual supporting outputs or entire Pages from being published to the Dashboard.
Custom HTML
You can add custom HTML onto a page using a calculation, as follows:
- Press Calculation
> Custom Code from the toolbar.
- Click onto the page to place the object.
- In the R Code editor, paste in the following code, replacing <b>dog</b> with whatever HTML you wish to use.
- Press Calculate.
rhtmlMetro::Box("<b>dog</b>", text.as.html = TRUE)
Typically, rather than just typing HTML, it is more useful to write the HTML using code. For example, see How to Hide an Output with a Small Sample Size Using a Calculation.
More advanced customization via the CSS
You can also modify the appearance of an online report/dashboard by modifying the CSS (cascading style sheet). For example, see:
- How to Hide Buttons in the Export Menu in View Mode
- How to Customize the Navigation Pane in View Mode
- How to Remove the Header Strip in View Mode
Please Note: While those articles can serve as guides, our support team cannot help with custom CSS coding, as it is well outside of our expertise