Reclaim the Salesforce Home Page

This tutorial shows how to redesign your Salesforce Home Page using Skuid. Using a Visualforce page within a Home Page Component, Skuid can be used to (almost completely) take over your Salesforce Home Page — in both the Sidebar and the main content area, you can embed Skuid, which allows you put pretty much whatever you can imagine with Skuid into your Home Page.

You can also use Skuid to create totally custom dashboard and home-like pages that aren’t linked to the Salesforce home tab, but rather your own branded header and navigation paradigm. To bypass the Salesforce home page entirely, create a Visualforce tab that shows a Visualforce page showing your custom home page (or a Page Assignment, see 1A) and, in Salesforce Setup under Create > Apps, make your custom home tab the default tab for the appropriate apps.

If you want to stay within the Salesforce home tab, follow Step 1 to create a home page component out of a Skuid page and include it in a home page layout (Step 19). The steps in between give you some ideas of what you may want in your custom home page, such as:

Snippets and conditions:

  • a CSS resource to prevent font enlargement: Step 2C
  • conditions to only show records owned by the user running the page: Step 7D
  • a Javascript resource to ensure that record links open in the main window, not the iframe: Step 18

Ideas for page content:

  • Tabs: Step 3
  • a chart of Opportunities closing this quarter: Steps 4-5
  • a chart of My Leads connected to a table with robust filters: Steps 7-13
  • a My Open Tasks table: Steps 14-17

For a note about how to create different home pages for different user profiles, see Step 1A.

Goal: Build a home page that displays the information you want to see.

image0

The sample home page created from this tutorial is available on our GitHub repo.

Create a Visualforce Page and a Home Page Custom Component

image1

  1. Click Setup (from the Skuid App, go up to the header and click your name > Salesforce Setup).
  2. Go to Develop > Pages or search for ‘pages’ in the search bar.
  3. Click on New.

A. Create your Visualforce Page that redirects to your Skuid page

image2

Before creating your Visualforce page, prepare your Visualforce markup using skuid:page Visualforce component. Base your markup on the examples listed in the Object/Controller-independent pages section.

Note

This tutorial assumes the Skuid page is called HomePage.Tutorials.

Note

You can also use Page Assignments to display different home pages to different users/profiles—just select “Home” as object/situation type. For more information, you can check out this community discussion.

  1. Give your Visualforce page a Label. In this case, I’m using ‘Skuid Home Page.’ The important thing is that your Visualforce page is something you will remember because you will need to reference it later!
  2. Paste the appropriate markup in the Visualforce Markup pane.
  3. Click Save.

B. Create a Home Page Component that incorporates your Visualforce Page

image3

  1. In Setup, click on Customize > Home > Home Page Components in the lefthand sidebar.
  2. Under Custom Components, click New.

image4

  1. Click Next.

image5

  1. Name your Custom Component.
  2. Select Visualforce Area for the Type.
  3. Click Next.

Note

Choose a nice name, because it will be displayed to users!

image6

  1. Select the name of your Visualforce page from the picklist.
  2. Type in 800 for the Height (in pixels). You can adjust this according to your needs, but this is a reasonable height for most uses.
  3. Click Save.

Steps 2-16 below will give you ideas for the sort of thing you may want to put in your home page.

Already built the Skuid page you want to use? Skip to Step 19 to assign this component to a Home Page layout. Keep in mind: your Skuidified Home Page will not work until you change the Home Page Layout!

Working in Skuid

Step 2: Create a new Skuid page to use for your custom Home Page Component

image7

A. Give this page the same page name you used in your Visualforce Page

image8

B. In Layout, unclick “Show Header” and “Show Sidebar”

image9

The Salesforce header and sidebar will be shown by the Home Page.

C. Add Custom CSS to prevent Font enlargement

image10

Note

This is only applicable if you are using this page in a Home Page Component. If this page is not being displayed as a home page component, don’t add this CSS.

  1. Click CSS.
  2. Click on the plus sign to add a new CSS resource.
  3. Click to open the Resource Body and add the following to the resource body:
body {
      font-size: 75%;
}

This will prevent the font-size and tables on the page from being too large. The reason this happens is that some of the standard SF styles are not applied in this case, and Skuid’s styles are relative to the underlying styles. This also happens when you uncheck “Show SF Header.”

Think of Steps 3-17 as guidelines/ideas to get you started building your own awesome home page. Release the kraken of your own creativity!

Step 3: Drag a Tab Set into the page

image11

Customize your tabs

image12

  1. Click on your Tab Set to add more tabs.
  2. Name each tab.
  3. Click to browse for a visually descriptive icon.

To give you an idea of the kind of useful info you can include on this home page, we’ll create tabs for Top Opportunities, My Leads, and My Open Tasks.

Step 4: Add a Model to bring in opportunities closing this quarter

image13

  1. Click models.
  2. Click to add a new model.
  3. Name this model.
  4. Start typing the object name, and select it from the list.
  5. Set a small Max # of Records - this will make the page load even faster.
  6. Choose the field to order records by - e.g. Amount DESC (from most to least).

A. Include the fields you want to be displayed

image14

  1. Click Fields.
  2. Click the checkbox to select the fields you want to include in this model. Make sure you include any fields you ordered the model by, as well as fields you want to display and/or filter by. For this example we’ll choose Amount, CloseDate, and StageName.

Pro Tip: Don’t forget you can use the search box in the upper righthand corner to find fields more quickly.

B. Create a condition where Close Date equals This Quarter

image15

  1. Click on Conditions and click to add a new condition.
  2. For field, click on the icon to choose CloseDate.
  3. Click Value and choose This Fiscal Quarter as the Value.

Now this model will only bring in Opportunity records whose Close Date is in this fiscal quarter.

Step 5: Add a chart to your page to display these opportunities

image16

  1. Click Components.
  2. Click on the Visualizations folder (or search for the Chart component).
  3. Click and drag a Chart into your page (we’re adding it to our Opportunities tab).

A. Configure your chart’s basic properties

image17

  1. Choose the Default Chart Type. For this example, we’re choosing Donut.
  2. Choose Additional Chart Types to make available for the users, like Pie and Funnel. (Who knew charts could make you so hungry?)
  3. Make sure Model is set to your Opportunity model.
  4. Configure the Title and Subtitle. In this example ours are “Opportunities Closing This Quarter.”

B. Create at least one Series of data for this chart to show

image18

We want this chart to display a sum of opportunity amounts grouped into stages.

  1. Click Series.
  2. Click to add a new series, and click on your new series to edit it.
  3. Choose Sum as the Aggregate Function.
  4. Choose Amount as the Data Field.
  5. Choose Field as the Split Type and choose StageName for the Split Field.

NB: Make sure these fields are included in your model. Otherwise you won’t be able to select them as the Data or Split fields :)

C. In the Styling tab, you can modify the colors and visual composition fo the chart

image19

image20

We’ll turn of the legend and data labels to keep the page clean.

  1. Click to modify the Legend properties.
  2. Choose Off for Layout.
  3. Choose Off under Display Data Labels.

Step 6: Create an Opportunities table to accompany your chart

image21

Drag a table under your chart, or open the Opportunities tab and double click the Table component to add it to the bottom of the tab.

A. Format your table appropriately

image22

  1. IMPORTANT: Set this table to your Opportunities model.
  2. Choose Read-Only as the Default Mode.

B. Click to Add Fields to your table

image23

C. Check the fields you want to include in this table

image24

  1. Check the fields you want to include in this table.
  2. Click Apply. The fields will be added in the order you check them, and you can rearrange them in the Page Composer as you like.

D. Click on the Amount field to add summaries

image25

For this example we’ll choose Sum, Average, and Max.

E. Click Add Features > Add Table Filter

image26

F. Create an automatic filter on the Stage Name field

image27

  1. Choose Multi-select Option f or the Filter Type.
  2. Select StageName as the Filter Field.

This will create a filter on this table where users can select which stages they want to see.

image28

  1. For this example, we’re choosing not to Show Label above Filter.
  2. For None Selected” Option Text, we’ll say Any Stage.

Save your page

image29

(Because you don’t want to lose all this work!)

Note

If you type Control/Command S you don’t even have to scroll up and click the button. Learn more about Using the Keyboard: Shortcuts, Hotkeys, and Accessibility.

Step 7: Create a new model for Leads

image30

  1. Click Models.
  2. Click to add a new model.
  3. Set your new model to the Lead object.
  4. Set the Max # of Records - a smaller number will help the page load faster, but since this data will be used in a chart as well as a table, I’ll set it to 50 so we have a good data sample.
  5. Choose which field to order records by. In this case, we’re choosing LastModifiedDate DESC, which will bring in the most recently modified leads first.

A. Click Fields and select the fields you want to include from this object

image31

Make sure you include any fields you ordered the model by, as well as fields you want to display and/or filter by.

  1. Click Fields.
  2. You can use the Search to help find fields you want to include.
  3. Check the desired fields.

B. Create a condition to only pull in leads that belong to the page-viewer

image32

  1. Click Conditions and click to add a new condition.
  2. Choose OwnerId as the field.
  3. Click Value.
  4. For Content choose Running user attribute.
  5. For Userinfo Property choose User Id.

Now this model will only include leads that are owned by the person viewing the page.

Step 8: Create a “My Leads” Chart

image33

  1. Click on the tab in the Composer where you want to put the chart.
  2. Click on the Components tab.
  3. Double click on the Chart to add it to the Leads tab, or drag and drop it in.

A. Configure the Basic Chart Properties

image34

  1. Again I’m going to choose Donut as the default type, and Pie and Funnel as the additional Chart Types.
  2. Make sure the proper Model is selected.
  3. I’ve added “My” before the title so on the page it wil read “My Leads.”

B. In Series, choose to Count on Id and Split on Rating

image35

  1. Click Series.
  2. Click to add a Series.
  3. Make sure the proper model is selected.
  4. We’ll choose Count as the aggregate function, and choose to count by the Id field, which is unique to each lead.
  5. For Split Type we’ll choose Field, and then select the Rating field. (This will divide our donut chart into sections based on lead ratings, but you could also choose a different grouping field, for example Account).

Note

You can only use fields here that you’ve included in your model. If you forgot (like me) to add the Id field, jump back over to Models > Leads and add it in.

C. Configure Styling preferences

image36

Go to the Styling tab. Again, I’m going to choose the Indigo 3 color palette, because I like it, and turn off the legend so the page isn’t cluttered.

Step 9: Create a Leads Table to go with your chart

image37

Drag in a Table component, or double click to add it. under your Leads chart.

Drag and drop into the table the fields you want displayed

image38

Alternatively, you can add fields by clicking Add Field(s) > Model Field(s).

Step 10: Create filterable conditions on the Leads Model

image39

  1. Click Models.
  2. Click your Leads model.
  3. Click Conditions.
  4. Click to add more conditions to this model.

Read on for ideas of conditions you can add to your Leads model to filter by.

A. Create a condition on the Status field

image40

  1. Choose Status as the field.
  2. Under State choose Filterable Default Off and create a name for the condition so filters can find it. Let’s say Status1.

This will allow us to filter leads in the model based on status.

B. Status is not “Contacted”

image41

For example, you can create a condition that will only show Leads that haven’t been contacted when it is turned on by a filter that we will create in Step 11.

  1. For field, click on the building block icon and select Status.

Note

Make sure you’ve included this field in this model.

  1. Click Operator and select != (is not) as the Operator.
  2. Click Value. Keep the Content type as “Single Specified Value” and enter Contacted as the Value.
  3. Click State and choose Filterable Default Off. The Condition Name will automatically be the name of the field, but you can rename it for your own convenience, something helpful like “Uncontacted”. (This name will not be displayed to users, but will help you identify the condition for filtering - see Step 11).

C. Modified in the Last 3 Days and Created in the Last 3 Days

image42

You can also create filterable conditions on date fields. We’ll do one where Last Modified Date is sometime in the last 3 days, and a similar one on the Created Date field, where Created Date is sometime in the last 3 days.

  1. For Field, choose a date field, like Last Modified Date or Created Date. IMPORTANT. Make sure you’ve included this field in this model.
  2. Click Value.
  3. From the picklist, choose a date range such as Last n Days.
  4. Choose the number of days, e.g. 3.
  5. For State, choose Filterable default off. The Condition Name will automatically be the name of the field, but you can rename it for your own convenience. (This name will not be displayed to users, but will help you identify the condition for filtering - see Step 12).

Step 11: Add a Status Filter to your Leads table

image43

A. Create a Select Option filter on the Status1 condition

image44

  1. Choose Select Option as the filter type.
  2. Choose to Pick Options and Condition(s) Manually. This will allow us to use this filter to affect both of the Status conditions we created in Step 10.
  3. For Condition to Affect, choose Status1. (This is the condition that we created in Step 10A where Status is filterable default off.)

Create helpful “None Selected” text and click to add an Option Source

image45

  1. For the “None Selected” Option lets say “Any Status.”
  2. Click to Add an Option Source.

B. Create a Picklist Options source

image46

This source will automatically bring in the Status picklist options into our filter. Awesome!

  1. Choose Picklist Options for Condition as Source Type.
  2. You can also use a Label Prefix, to display before each option. Let’s say “Status: “ (Make sure you put the final space in there, this way your picklist options will be displayed as Status: Qualified etc.)

C. Click to add another Option Source

image47

D. Click to add a New Option

image48

E. Create a “Not Contacted” option

image49

This source will affect the other condition we made on the status field, where Status is not contacted.

  1. Choose Affect Other Condition(s).
  2. Create a label for this option, for example “Status: All But Contacted.”
  3. Click to Add Effect (this is where we’ll tell the source which condition to affect).

F. Choose to Activate our Uncontacted condition

image50

Here choose to activate our condition, where Status != Contacted.

Step 12: Add a Date filter to your Leads table

image51

A. Create a Select Option filter

image52

  1. Choose Select Option as the filter type.
  2. Choose to Pick Options and Condition(s) Manually. This will allow us to use this filter to affect both of the date conditions we created in Step 10C.
  3. For Condition to Affect, choose None.

Create “None Selected” text and click to add an Option Source

image53

B. Create a New Option under the new source

image54

C. Choose “Affect Other Condition(s)” and label your option

image55

We’ll use this option to activate our Last Modified Date Condition.

  1. Choose Affect Other Condition(s).
  2. Label your option, e.g. Recently Modified.
  3. Click to add an effect.

D. Choose to Activate the LastModifiedDate condition

image56

E. We’ll create a similar option to activate our Created Date condition

image57

Step 13: Create an automatic Rating filter on your leads table

image58

Create an automatic select option filter on the Rating field

image59

Skuid will automatically generate the options for this filter based on the different values of the Rating field.

Create helpful “None Selected” Option Text

image60

Save your page

image61

Because you don’t want to lose all this work!

Note

If you type Control/Command S you don’t even have to scroll up and click the button. Learn more about Using the Keyboard: Shortcuts, Hotkeys, and Accessibility.

Step 14: Create a Tasks Model

image62

  1. Click Models.
  2. Click to add a model.
  3. Name this new model.
  4. Choose the appropriate standard or custom object: in this case, Task.
  5. Choose what field to order this model by, we’ll choose ActivityDate DESC to bring in tasks from latest due date to earliest due date.

A. Click to add fields to this model

image63

  1. Click Fields.
  2. Use the Search feature to help you narrow down the list quickly.
  3. Click to select the fields you want to include from this object. Include fields you want to include in your table, as well as any fields that you want to use for conditions and filters.

B. Click to add an Owner = Running User condition

image64

For more information about this type of condition, see Step 7B.

  1. Click Conditions to add a new condition.
  2. Click on your new condition to edit it.
  3. For Field choose Owner Id (this is the lookup to the User model). Make sure this field is included in your model!
  4. Click Value.
  5. Choose Running user attribute > User Id as the Value.

Now this model will only pull in Tasks owned by the user running the page.

C. Add another condition where Is Closed = false

image65

  1. Click to add a new condition.
  2. Click on the new condition to edit it.
  3. Choose Is Closed as the field. Make sure you include this field in your model!
  4. Click Value.
  5. Unclick the checkbox so Value reads false.

Now this model will only pull in open Tasks owned by the user running the page.

Step 15: Create a Tasks Table

image66

  1. Click to open your Tasks Tab.
  2. Click the Components Tab.
  3. Double click or drag and drop to add a table into the Tasks tab.

A. Make sure the table’s set to the Tasks model

image67

By default, new components are set to the model that you’ve most recently modified.

B. Add fields into your table

image68

Not working? Make sure this table is set to the right model.

You can drag fields from the Models tab, or you can click on the Add Field(s) button on your table to add fields (and include them in your model) right from the table.

Step 16: Add a Status filter to this table

image69

It’s just too easy.

Create an automatic select option filter on the Status field

image70

Add helpful “None Selected” Option Text

image71

Note

This will also have “completed” as a status option, but that option won’t display any task results because we said in our model we only want open tasks. So, you can either take that condition off and allow completed tasks, or follow this more elegant solution:

  1. Create a filterable default off condition on your original Tasks model on the Status field. (Don’t enter a Value).
  2. Create a new aggregate model on the Task object and add a grouping on the Status field.
  3. Create a condition on that model where isclosed=false. That means this model will bring in the names of all your non-closed task statuses.
  4. You can then set this filter to pick options and conditions manually for the model’s Status condition.
  5. Add a source based on the aggregate task model and have {{{status}}} the label template and the value to inject into the condition (see the picture below). The repository version of this page use this method so if you’re feeling lost, you can see it in action there, or ask for clarification on community.skuid.com.

image72

(Bonus) Step 17: Row Actions For the Win

image73

These two relatively simple row actions will make your page way cooler and more functional and your users will love you forever.

  • Click on your table.
  • Click Add Features.
  • Click Add Row Action.

Action 1: Mark Completed

image74

Click on a row action in the table to edit it.

  1. Choose Run Multiple Actions as the action type.
  2. Label the action something helpful like Mark Completed.
  3. Choose a visually descriptive icon… like the Skuid mark completed icon, even.

Add 3 Actions

image75

  1. Click Actions.
  2. Click on the plus sign next to actions to add 3 new actions.
  3. Have the first action Update a field on model. Chose the Tasks model, and the Status field, and set the Value to Completed. This will mark this task on this row of the table complete.
  4. Have the second action Save changes in the Tasks Model.
  5. Have the third action Query the Tasks Model.

Saving and querying the tasks model will update the table for us, so our completed task will magically disappear from the open tasks list.

Action 2: Details Drawer

image76

This action allows you to include the often-cumbersome Task Description field as a dropdown drawer for each table row.

  1. Choose Drawer as the action type.
  2. Label the action something helpful (View Details, for example). This is the text users will see when they mouse over the action icon.
  3. Choose visually descriptive Action and Drawer opened Icons. My personal favorite is using the closed folder for the action and the open folder for the open drawer.
  4. Click to configure drawer.

Add a Field Editor to the drawer to display the relevant field(s)

image77

You can replicate this drawer by:

  • Add a field editor to the drawer (set to the same Tasks model that the table is set to).
  • Set the field editor to edit-mode.
  • On the field editor’s Display tab for Field Layout choose Label above field.
  • Delete one of the columns.
  • Label the column in the remaining section Description.
  • Add the Description field to the field editor.
  • Click on the Description field and add a space for the Custom Label so that the title disappears. (Basically we’re using the section header for the field ‘s label).

Deploying in Salesforce Classic

Step 19: Include your custom home page component in a Home Page Layout.

image80

  1. In Setup > App Setup, click Customize > Home > Home Page Layouts.
  2. Click New.

A. Name the New Home Page Layout and click Save

image81

B. Choose to display your new Home Page Component

image82

  1. Click to include the home page component you created in Step 1.
  2. Choose what you want to include in the Narrow Components section of this home page layout.
  3. Click Next.

C. Arrange the components on your home page and click Save & Assign

image83

  1. Click on components and use the central arrows to arrange them.
  2. Click Save & Assign.

D. Assign this Layout to the appropriate Profiles and click Save

image84

  1. Assign this Layout to the appropriate Profiles.
  2. Click Save.

Step 20: Collapse the Salesforce sidebar

image85

Recently, Salesforce disabled the ability to fully remove the sidebar from the pages. You can, however, make the sidebar collapsible.

  1. Go to Setup.
  2. Click on Customize. Scroll down to the bottom of the Customize list and you’ll see the link to the Salesforce User Interface page. Also, you can enter User Interface in the Search All Setup… bar.
  3. Check the box next to Enable Collapsible Sidebar.
  4. Click Save.

Deploying in Salesforce Lightning

If your users work in Lightning Experience, you’ll need to create a Lightning page for your Skuid page first. After doing this, use the Skuid Page Lightning component to drag and drop your Skuid page into the Lightning page. You’ll then be able to deploy that Lightning page to your users as their new home page.

To update the home page for your Lightning-enabled org, navigate to Feature Settings > Home in Salesforce setup.

From this page you can deploy a home page to your entire org or to specific profiles.

Note

If you are working within a production org, Skuid recommends testing the home page with specific profiles before deploying to the entire org.

Option 1: To assign the home page to specific profiles:

  1. Click Set Page Assignments.
  2. Select which profiles should have access.
  3. Click Next.
  4. Select the page you’ve created.
  5. Click Next.
  6. Click Assign.

Option 2: To deploy the home page to the entire org:

  1. Click Set Default Page.
  2. Select the page you’ve created.
  3. Click Next.
  4. Click Assign.

To update your assignments at any point, repeat the above steps.

Explore your new home page!

image86

  1. Click on the Home tab. Your new page will be displayed! (If it’s not, see Troubleshooting below).
  2. If you followed the instructions in Step 18, you should be able to hide the sidebar. Click or use the keyboard shorcut: Alt + S to collapse the sidebar.
  3. Your Opportunities chart and table will be displayed in the first tab. Hover over a chart area to see its details.

Changes made in the Opportunities table will dynamically update the chart

image87

  1. Change what type of chart is displayed.
  2. When you filter or search your table, changes will be reflected in the chart above. Pretty sweet, right?
    • The Amount summaries at the bottom of the row change according to filters and to reflect the records you check.
    • At the bottom of the table, there’s an option to Load More records into your model. This will also affect your chart.

To troubleshoot the Opportunities tab, see Steps 4-6.

The Leads Tab

image88

  1. When you search and filter on this table, the chart above will dynamically update.
  2. You can edit Leads right in this table! (And the chart will reflect your changes, even before you save!)
  3. Click on a name to go to that Lead’s detail page. If you included the Javascript resource in Step 18, these links will open in the main window instead of the home page component.

The Tasks Tab

image89

  1. You can search and filter on this table.
  2. Click on a Task Subject to go to that Task’s detail page. If you included the Javascript resource in Step 18, these links will open in the main window instead of the iframe.
  3. Remember, at any moment you can click to open the Page Composer and edit this page.

If you completed the bonus step

  1. Click to open your drawer and reveal the Task description.
  2. Click to mark this task completed, save the tasks model, and remove it from the open tasks table.

Troubleshooting

  • Make sure you substituted the name of your Skuid page for HomePage.Tutorials in the Visualforce markup in Step 1.
  • Did you include this component on a home page layout assigned to your profile? (See Step 19D)

The Leads Tab

  • If your filters are behaving weirdly, double check that all of the fields in your filterable conditions are included in your Leads model.
  • Look back at Steps 7-13 and make sure there’s nothing you missed.
  • If your links are opening in the iframe instead of the main window, review Step 18 and make sure you copy and pasted the code correctly and that you chose “Inline” as the Resource Location.

The Tasks tab

  1. If your filters are behaving weirdly, double check that all of the fields in the filters are included in your Cases model.
  2. Look back at Steps 14-17 and make sure there’s nothing you missed.
  3. If your links are opening in the iframe instead of the main window, review Step 18 and make sure you copy and pasted the code correctly and that you chose “Inline” as the Resource Location.

Need Help? Ask questions and report problems at community.skuid.com

image90

For cheats and troubleshooting, check out the XML editor.

image91

  • Can’t figure out where you went wrong? Save your page and click View/Edit XML to copy your page code and share it with us.
  • This XML editor also means that you can copy and paste the working page into your org and tweak it from there. Get this page in our page repo.