This guide will show you how to create a Welcome Page that looks like this…

To start with, it’s important to understand the values for the charts and name, description, profession etc. come from fields in the CRM.

You’ll have to create all the fields you need beforehand.

As an example, let’s create the three fields needed for the charts: Document Needs, 2021 Tax Return, Payroll Requirements.

Go to Flyout Menu > Custom Fields.

Then, click the +Add Custom Field button.

And a new form with a list of information needed to create the form will show up.

In the screenshot, you can see how to fill it in to create a number field with “Usage” CRM > Contacts.

As we’re building a Dashboard Page for our Contacts, it’s crucial you select this Usage Type. You cannot change the Usage Type later on, so make sure you double-check before adding the field.

Once you’re done, click Add.

The field will appear in the list of Custom Fields.

Then, repeat the process for the other X fields you’ll need. In our case, we’ll go ahead and add “2021 Tax Returns” and “Payroll Requirements”:

Great, we’re all set! It’s time to start building the page.

Navigate to Pages > Portal Pages > Add New Page.

You’ll have to decide who to assign this page to. Assigning the page doesn’t mean this will be their dashboard, we’ll figure out how to do this later.

Let’s assign to All Contacts.

Great! You’ll then have to decide where this page will show up. Assign a Category and a Page Name below.

Perfect, now we have all the settings done and we can start building our page.

Let’s choose the Content Block Editor, our newest WYSIWYG tool.

That will auto-generate a text component. Let’s delete that, as we don’t need it. We’re pros and we build everything from scratch 😉

Hover over the component, and then click on the “x” icon to remove it.

Now, let’s understand how we have to structure our page.

Everything in the Content Block Editor works in columns and cells. So, let’s try to understand how many columns we need, and how many cells will be in each column.

As a reference, let’s go back to the example image.

We will need two rows and, within each row, we’ll need to account for the columns.

We will need four for the top row and only two for the bottom row.

Now that we can visualize the grid, let’s build it in the editor. Click on the “+” icon and then select a four-columns row.

You will see the structure appear.

Since we’re now expert column builders, let’s save time and create a two-column row for later as well. Click on the “+” icon again and create a two-column row.

To follow the example, let’s choose the 1/3 + 2/3 , 2 columns row.

And et voilà…Are you starting to see it? We thought so!

Now it’s time to enter the data in. This is actually a very easy process.

We’ll build the Top-Left content first. We need: the Client profile image, Client name, Client company, description or random text.

Click on the first cell and add an image component.

Choose Avatar as the source.

Then, choose to fit the image responsively and select Circle for Image Style. Save when you’re done.

The placeholder will look like this…

If it’s too big for your liking, you can edit the image and set the width and height manually. For example, the template we showed above is 200px x 200px.

Now, let’s add the Client Name.

Hover over the text block shown below, and click the “pencil” icon to edit.

Then select the text, and click on the {x} icon to show the list of available Placeholders.

Select the clientFullName, then save.

This is how it looks while editing, but it will populate the Client’s name when viewed from a Client’s account.

You can do the same thing for the other fields. It works in the same way!

Now for the charts. For those, let’s convert all of the text Blocks into Heading 2 text and give them labels.

Let’s do that by highlighting the text and clicking the  ¶ icon.

And here’s the result after a quick save.

Looks better, doesn’t it? Let’s do the same for the other two.

Perfect. It’s time to add the Charts in 🔥

The charts will be connected to the custom values we set up in the step earlier. Please make sure you have them ready.  Add a Chart Block.

We only need one value, so you can delete the existing values and give it a name.

Our value won’t be static. Click on the “pencil” icon next to the value to edit it and make it dynamic.

Change the Source Type to Custom URL (Number type).

Beautiful, all of our number fields will show up now. Select Documents Needed as we’re editing that one now.

Then, choose the color and update it.

Everything’s done for this one, so let’s save this chart.

Perfect! Doesn’t it look fancy?

Let’s do the same for the other two. Make sure you connect the correct values to the right chart.

If you don’t want to start from scratch every time, simply duplicate the chart we just created by clicking the icon shown below.

And here we go, all’s well for the top row.

Now for the bottom row. We’ll need four button components. Let’s go ahead and create those.

Click on “+” and add a Button Block.

Let’s review what we need those buttons to do.

“Open Task Board” and “Access your files” will be using what we call Placeholder Links. These are special URLs that will redirect the user to a dynamic place in the portal.

“Schedule and Appointment” and “Send us a message” will use generic URLs to direct that user to the specific areas of the platform, respectively.

For example, here is how you would set up “Open Task Board”.

Cool, so we have an Action. Let’s add the Button Text to explain what that button does.

And now it’s time to play the matching game. Open each button and match it to the correct action.

Like we did earlier, we’ll have “Open Task Board” use the Click Action Navigate to Project. By default, this will direct them to their own latest Project.

Woohoo! You’re on fire, look at your page now! You’re definitely closer than ever to become a SuiteDash pro.

Let’s Duplicate the button three times so that we have a total of four.

Then it will look exactly like our example.

If you want it to take the entire space of the column, feel free to edit the Width and set it to 100%.

And we’re good to go. Here’s the button on our page.

“Access your files” will use the Click Action  Navigate to Client’s “Shared with me” folder.

And here’s the final result…

Save it with the text as Header 2 like you did before, and add a quick text description.

Perfect, now the left column with the buttons is completely done.

For the right column, we only need to add some custom text. There’s only one dynamic element, the Client’s name.

However, we only need the name, not the full name. Let’s make sure we use the correct Placeholder, which is clientFirstName.

And “Send us a message” will use the Click Action Navigate to Send New Message.

“Schedule an Appointment” will use the Click Action Open Appointment Scheduling Pop-up.

(Note: make sure you select an Appointment Type so that they can actually book something with you!)

And here’s the final result…

Of course, it will look better once you actually impersonate the Client, but you should be proud of your accomplishment!

Now it’s all yours to tweak to perfection and bring it to life.