5. Designing your app

Designing web apps in Budibase is super-fun. Budibase is flexible and you can design just about anything. To make life easier and speed up development we have provided a few automations along the way.

Budibase's Design interface has 3 sections:

  1. The left panel contains your navigation settings,

  2. The middle section contains your components and a preview of your web app,

  3. And the right panel contains your settings and design properties.

At the highest level, you have two sides to your new web app; private and public. We’ll take a quick look at the public side first.

Public - Login

The public side of your web app is what anyone on the internet can access. Currently, it is only possible to have a login page here. You can easily change the logo, text, and look and feel of this page using the settings and design properties available in your right panel.

  • We will change our logo by simply replacing the logo URL with the one below: https://i.imgur.com/3SvFo1k.png

What’s really cool is Budibase takes care of authentication for you, saving you hours of development and allowing you to focus on building the private section of your web app.

Private - Your web app

The private side of your web app is only accessible by you and your permitted users. Budibase apps are single-page applications, which are made up of screens and components. There are two types of screens, a master screen, and the default screen. Each screen is made up of components.

Understand the Master Screen

The master screen is where you put components that are consistently present throughout your app - for example, a navbar. It’s also where your screenslot goes. The screenslot determines where your screens go - almost like a template.

  • If you click on the navigation component, you can add the new logo - which you find below. https://i.imgur.com/3SvFo1k.png

The nav links were automatically created, along with screens when you created your tables in the data section of Budibase. If you preview your app, log in with your username and password, you can click around and you’ll find all your screens are linked, your data is displayed, and your forms are hooked up to your tables and are ready to be used. Super-cool, right!

Adding components and using the Repeater

Moving back to the builder, it would look a bit better if we did not use the grid component for deals, and instead used a stacked list.

  • Click on the Deals - List screen. Hover over the grid component and click the ‘more’ symbol and delete the Grid component.

  • Now, click on the Repeater component. This special component fetches data from your tables.

  • In the settings panel, click the data dropdown, and select the Deals table.

  • Now, click on the Cards component dropdown, and select Stacked List.

  • You will notice 5 blue rectangles appearing on your screen.

Binding components to data in tables

  • In the settings panel, locate the image text box and click the pencil icon. And in the binding popover, click List 1.Deals.Logo

  • For Heading, choose List 1.Deals.Company.

  • For Text 1, choose List 1.Deals.Contact

  • For Text 2, choose List 1.Deals.Contact email

  • For Text 3, choose List 1.Deals.Value

  • For DestinationUrl, choose Deals Details

Designing components

As you can see, the stacked list is looking a little plain for our liking.

  • Click on the Design panel, select Margin, and where it says Bottom, click the dropdown, and select 16px.

  • Move down to the Background section of the design panel, and click on the color picker box. In the text field add #f5f5f5, or drag the color pick to choose a light grey.

  • Go to the Border section. For radius, select medium, for width select small, for color add #eeeeee, and for style select Solid.

Our stacked list is now looking a lot better.

Creating a card from scratch

Our homepage has a video of Rick Astley which is not ideal. Let’s remove that.

  • Click on the Home screen, hover over Video Container, click the more icon, and select delete.

  • Add a container component, and in the design settings, in the layout section, change the display label to Flex, and select the right pointing arrow where it says direction, and change gap to 64px.

  • Go to the Margin section, and change bottom to 64px.

  • Then add the Repeater component. And in settings, select Total Sales.

  • Navigate to the design panel, and in the layout section, change display to flex, and select the downward arrow where it says direction.

  • After that, move down the Padding section, and change all sides to 32px.

  • Then in the size section, change the flex label to grow.

  • Then move down to Background, and change the color to white - #fff

  • Now click the Elements dropdown, and select Paragraph. In Settings, beside Text, write Total Sales.

  • Add another Paragraph. In settings, beside Text, click the pencil icon, and in the binding interface, under Tables, select List 1.Deals.sum , and click done.

  • Click into the design panel, and in the typography section, change weight to 700, and the size to 72px.

  • Hover over List 1 in your navigation, click the more icon, and select duplicate.

  • Now click on List 2, and in the settings panel, change the Data Label to Pipeline Value.

  • And change Text 3, to Total Pipeline.

Voila!

Adding a chart

  • Now click on the home screen item in the navigation panel.

  • Click on the charts dropdown and add a bar chart.

  • In the settings panel, change Data to Deals

  • Change Name Label to Company

  • Change Value Label to Value.

  • And to show off a little more, let’s change the gradients to Blue Purple.

  • Change the width to 1200

That’s us finished with Design. The app is looking beautiful with very little effort.

Next up, adding an email automation!