Description
A simple dashboard template consists of the 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 |
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 |
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
Note: You can always skip this option by pressing |
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 |
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 |
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 |
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 |
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.