Using Templates in SuiteDash

What are Templates?

Templates are snippets of code that you can use as a starting point in many areas of your SuiteDash account.

What does the code look like?

Here's a quick example of some code you might see as a 'template'

<div class="row mt-1">
    <div class="col">
        <div class="card portalpage-titlecard" style="width: 100%;">
            <div class="card-body"><span class="portalpage-h3">{{clientFirstName}} {{clientLastName}}</span><span class="portalpage-headertag">{{InvestmentStrategy}}</span></div>
        </div>
    </div>
</div>

😟 I'm afraid of code, what do I do?

Firstly, take a deep breath and just envision what a coding ninja you'll be when you accomplish this!

Secondly, it's really not that hard. Just follow along with the given examples, and you'll get it!

In most cases, you'll just be copying and pasting the entire snippet of code into place, and then changing just a few key areas to match your needs.

Start with this easy Example

You want to create a simple announcement for your Clients that welcomes them to your Portal, and gives them some instructions on what they should do next. Additionally, you want to create a quick video of you welcoming them and display that.

Well, there's a template for that, so let's start with that.

ANNOUNCEMENT TEMPLATE: Two Column layout w/ Video : Click to open Template in a new tab.

Ok, so you have that Template open, and it contains two sections of code.

First, you'll grab the main announcement code by highlighting it and copying.

Then, you'll go to your Dashboard where you will create a new Announcement.

CREATE ANNOUNCEMENTS w/ TEMPLATES : Click to open in a new tab

From there, you'll simply paste the code into place in the Announcement widget.

Editing the Code

So, now you'll just want to edit the parts of the code that will get your desired results.

Editing the text is easy! Just highlight and edit the words between these tags >Look for text that appears between these two symbols. This text is save to edit. Just make sure you leave the symbols around the text alone.<

Just remember not to edit or change anything between <these symbols>

Changing where the Buttons link to

For the buttons, you're going to 'hard link' these buttons to static URLs within the platform.

Keep in mind though, that even thought the URLs are static, what a user sees when they land at that URL will vary based on the permission and assignments they've been given. Client Alpha will see completely different information than what Client Bravo will see, and Client Charlie will see something different, etc...

If you want to make these 'hard links' for a Client facing Announcement or Portal Page, you'll want to either Impersonate a Client, or get logged in as a test Client in another browser.

From there, navigate to the page/view that you want to link to, and then look up in the URL bar of your browser.

Then, you'll simple use that hard link (or a relative link) in place of the link that is in the Template.

Look for the button code by recognizing this code <a class="btn btn-dark cont...

Then to replace the URL paste your hard link URL here href="yourURLhere"

Then to change the button's label, change the code here ....>Your Label Text Here</a>

Check to be sure your changes are showing as you want, and test your buttons to be sure they're linking to the correct place.

🥳 BOOM!

You did it! Congratulations