Simple dashboard template

Set up your page with a simple dashboard showing statistics and a configurable data table.

Description

A simple dashboard template consists of a configurable data table and some cards with static data showing, for example, the statuses of a team’s projects. These cards are introduced in this template to illustrate the possible capabilities of this kind of page.

Getting started with a Simple dashboard template

Creating a new page

Once you open your application’s dashboard, go to the Pages section and choose the “+” button to add a new page.

The next thing you will see is the “Choose a page template”. Here you need to find the “Simple dashboard” template and click on the ‘Use’ button (or ‘Preview’ if you want to see the interactive example of use).

Configuring a page

Step 1: Fill in the page’s name (1) and edit the page path (2) to your liking (use underscore instead of a dash, for example). Next, choose the type of page (3): the “Authenticated” type of page will require users of your application to log in, whereas the “Public” option will allow the page to be accessible by everyone. Click ‘Create page’ after you have finished with the configuration.

Step 2: In the following window, you can select the header and footer partials of the existing ones (4) or use a partial auto generator (5) that is going to generate the default header and footer partials. After picking one of the options, proceed to the last step by pressing the ‘Next’ button.

Note: You can always skip this option by pressing ‘X’ next to the header and footer partials and then clicking ‘Next’.

Step 3: Select a model to be used in your data table (6), add the properties (columns) you want to be shown in it (7), and lastly, set the search property (8). After it’s complete, hit ‘Save’.

Use of template

View and search records

As mentioned previously, the main feature of this template is a data table with records which you can modify from the page builder overview: add some extra columns, buttons, or other components.

When you press ‘Play’ to compile it, you will be able to see the data table with all the records with the chosen properties (1). In our case, these are name, due date, and status. Also, above the table, you’ll notice a search box (2) that enables you to find the record you need.

Adding functionality

Most of the page templates provided by Betty Blocks serve as carcasses for your application, therefore you may see some pre-created components that give you hints on what kind of functionality you might add next.

Such elements as buttons can be used to redirect users to other pages. Within this template, there are a few of these: navigation bar ‘Menu’ buttons and the ‘New Projects’ button above the data table. Learn more about adding interactions here.

Right above the data table, you can see some of the cards showing the project statistics. These cards are made out of different components and they are static, though you can either fill in the data manually or put a data container around them to show the dynamic data. Find out about working with data via the page builder in this section of the documentation.

Page stylization

After you’ve created and set your page, it’s time to add some custom styling to it.

Replacing logo

To make sure the profile details page looks in line with your product’s visual design, you might want to apply some changes. First of all, you can add your logo to the header.

Go to the page builder and click once on the header to select the partial component. Then, in the pages menu, click on the ‘Edit partial' option.

When you are in the partial editor, click on the header (‘AppBar’) once again in the options menu on the left and scroll down to the logo section. Here, replace the default URL with one of your own images.

Note: If you haven’t used partials while creating this template, just find the needed component with a logo and replace its URL as in the example above.

Customization via theme builder

It is also possible to change your page style via the theme builder. You can find it in the tools section.

Here you can pick up the most suitable color scheme for your application.

Also, it’s possible to configure your typography. Choose the fonts for the page titles and body text.

After you’ve finished customizing, don’t forget to click ‘Save and apply’.

Customizing your application could be really fun, whether you already have some references or want to do everything from scratch. Play around with styles and find the one you enjoy. More information about the theme builder is available here.