Compose a Branded Header and Navigation

This tutorial shows how to create a custom header and navigation bar that you can use across multiple pages (like the one used in the Skuid app itself). Our custom header will incorporate a company logo, a responsive grid, Salesforce tabs and some custom stuff.

In this use case we are going to:

  • Enable a header (Step 1B)
  • Use a responsive grid to create flexible sections within our header (Step 2)
  • Add a company logo (Step 3)
  • Create a nav bar based on the Salesforce tabs fort the current app (Step 4)
  • Configure a custom global search (Step 5)
  • Include a dropdown navigation of Salesforce apps (Step 6) and another for the Salesforce User Menu (Step 7)
  • Add a user picture (Step 8)
  • Make this page a principal page (Step 1A) so you can use it as a template for other pages (Step 9)

The finished header will look like this:

image0

We’re going to show you how to build a header like this one.

Step 1: Compose a new page

image1

  1. Click Compose > New Page.
  2. Name your new page (don’t worry about Type or Starting point).
  3. Click Create Page.

You may notice the standard Skuid header looks a lot like the header we’re going to build - that’s because Skuid header and navigation was built using Skuid… Pretty meta, right?

A. Make this page available as a principal

image2

  1. Page Properties are shown when you first open a page, or anytime you click on the page name.
  2. Check to make this page Available as a principal page. We’ll talk more about this later.

B. Set a Custom Header

image3

  1. In Page Properties, click Layout.
  2. If you want, you can uncheck these boxes to hide the standard Salesforce Header and Sidebar.
  3. Check this box to Show Custom Header.
  4. The Header area will appear below.

Step 2: Add a responsive grid

image4

Drag and drop a Responsive Grid into the header. The Responsive Grid will allow us to divide the header into flexible horizontal sections that will wrap as needed.

A. Add divisions

image5

Click Add Divisions.

We’ll have six divisions in this responsive grid: one for your logo, one for tabs, one for search and one each for user picture, other apps, setup info. For each division we can specify how we want it to behave (e.g. is it flexible? how small do we want it to get?).

Step 4: Add Navigation Component

Add the Navigation Component to your second division.

image9

We’ll use the second division for a nav bar. We’ll keep this division flexible, so the nav section can take up as much or as little room as the other divisions leave it.

For this example, we’ll select “Salesforce Tabs for the Current App” as the item source.

image10

This will auto-populate the Navigation Component with the Tabs for the Salesforce App that this page will be included in. You can also add more nav items with “manual” as the source to redirect to your own pages and run custom actions. (More info on the Navigation Component.)

Step 6: Add another Navigation Component

This time, add a Navigation Component for the Salesforce App menu.

image15

  1. Drag and drop a Navigation Component into your fourth division.
  2. Choose Drop Down as the Type.
  3. Choose Salesforce Apps as the Item Source.

You can also add more nav items with “manual” as the source to redirect to your own pages and run custom actions. (More info on the Navigation Component.)

A. Fit to Content

image16

  1. Click Division (just above the Navigation Component).
  2. Choose Fit to Content for the Division Behavior.
  3. Choose Center for Vertical Alignment.

Note

This is a good idea for all of your divisions, because it will looks sharper that way.

Step 7: Add another Navigation Component

Add one more Navigation Component to incorporate the Salesforce User Menu.

image17

  1. Drag and drop another nav bar into your fourth division.
  2. Choose Drop Down as the Type.
  3. Choose Salesforce User Menu as the Item Source.
  4. For Label, use the template {{$User.name}}.

A. Fit to Content

image18

  1. Click Division (just above the Navigation Component).
  2. Choose Fit to Content for the Division Behavior.
  3. Choose Center for Vertical Alignment.

Note

This is a good idea for all of your divisions, because it will looks sharper that way.

Step 8: Create a profile picture section

image19

This is not as scary as it seems!

A. Add a model on the User Object

image20

  1. Click Models.
  2. Click to add a new Model.
  3. Choose User as the SObject Type.
  4. Enter ‘1’ as Max # of records.

B. Add Name and ‘Url for Thumbnail sized Photo’ fields

image21

  1. Click Fields.
  2. Check to include the Full Name and ‘Url for Thumbnail sized Photo’ fields.

C. Add a condition

Add a condition where the User Id is the Id of the user running this page.

image22

  1. Click Conditions, and click to add a condition.
  2. Choose User Id as the field.
  3. Click Value and select Running user attribute as the Content.

D. Add an image component

image23

  1. Drag and drop an Image Component into your final division.

  2. Select URL as the Image Source.

  3. For Image URL, use the template {{$Model.CurrentUser.data.0.SmallPhotoUrl}} but replace “CurrentUser” with the name of the model you just created. For example, if you named your model “User,” then your merge syntax would be {{$Model.User.data.0.SmallPhotoUrl}}.

Note

Don’t worry if your image doesn’t automatically show up - it will on the page preview.

But why doesn’t this photo look like cute little round one in the Skuid header?

E. Edit Image Styles

image24

I discovered how to format the image (and really how to build this whole header) by going into the SkuidCoreprincipal page, which is included in the Skuid App, and basically ripping it off. This is a great way to learn how to use Skuid: (1) find pages composed by people smarter than you, (2) figure out how they work, and (3) tweak them to do what you want to do.

In this case, you can use the Style Attributes of the Image Component to make the image smaller and circular.

  1. Click Styles.
  2. Click to add new Style Attributes.
  3. Add the following Style Attributes:
    • width: 30
    • height: 30
    • overflow: hidden
    • border-radius: 40px [this makes it round]
    • border: 1px solid rgba(255,255,255,0.4) [this adds that sweet grey border]

F. Fit to Content (again!)

image25

This will ensure that the division is always only the size of the Image, and leave more room for the other, flexible divisions.

  1. Click on the Division header, right above your Image Component.
  2. Select Fit to Content.

Step 9: Add Page Regions

image26

In Step 1, we made this a principal page. When you make a page a principal page, you will automatically get a bonus component - Page Region. Page Regions are what will be customizable on your dependent pages. dependent pages inherit the rest of the page from their parent page, so put page regions anywhere on this page that you will want to be customizable at the individual page-level (these will not be customizable on the principal page).

Click Save and Preview

image27

Success! You’ve created a working, branded header.

image28

Here are our six divisions, pretty as a picture, but even better than a picture because the navigation actually takes you where you want to go and the Search actually works.

  1. Notice how this division (our second one) takes up more space than the others. That’s because it’s flexible and the others are all “Fit to Content” (Step 3b) or have a smaller flex ratio (Step 5c).
  2. Our Search Component and its redirects work. Golden! Note that it automatically brings in our custom labels (Personnes for Contacts).
  3. This part is our Page Region, which is customizable on dependent pages.

Use dependent pages

Whenever you want a new page to have this custom header, make it a child of this page.

image29

There are two ways to do this.

  1. On your principal page, click dependent pages to bring up a list of all this Page’s children.
  2. Click Create New dependent page.

Or …

image30

  1. Click Compose > New Page.
  2. Click Use a principal page.
  3. Start typing the name of your custom header page, and click to select it.

The Header (and everything else from the principal page) will be automatically included and you can just focus on customizing the Page Region.

image31

For more information, check out the tutorial on Principal and Dependent Pages.