Highlight Critical Data: Wrappers, Rich Text, and Ui-Only Fields

This example shows how to highlight critical data on your Skuid page using wrappers, rich text, and custom components. We built a management dashboard that highlighted statistics we wanted our team to be focused on. With aggregate models, Rich Text components, and Wrappers you can do a lot of damage. In addition, if a statistic requires client side calculation UI-only formula fields can help us out…

Our Target: Create these statistic tiles for our Management Dashboard.

image0

Monthly Recurring Revenue over $1 million? Sure sign that this is a demo org!

Step 1: Build Aggregate Models to provide totals.

image1

  • Aggregate models are the best way to calculate Key Statistics. In this model I wanted to show the number of active customers.
  • I added a Count aggregation on the Account ID field and a condition where Account ID was a result of a subquery on the Opportunity object, for opportunities that were Closed Won.
  • Because we want this model to display a single number, make sure there are no Groupings on this model.

Check out Aggregate Models for a deeper explanation of their power.

Step 2: Add a Rich Text or Template component to display data.

image2

We can use either the Template or the Rich Text component to display static information. Which one should you use? The Rich Text component is easier to configure declaratively, and the Template component is easier to configure via code. In this example we’re using the Rich Text component and the Wrapper component (see Step 4) to style everything declaratively. If this components don’t meet your design needs, try using the Template to include custom HTML and link to custom CSS.

  1. Drag the chosen component into your page.
  2. Change the Model property to the Aggregate Model you just created.
  3. Enter the text you want to display, in this case we’ll say: Customer Accounts: {{{countId}}}. The text in brackets should be the field alias from your aggregate model, which you can view under Models > Your Model > Fields, or insert by clicking on the Insert fields button on your Template/Rich Text component.

Step 3: Check your work…

image3

Save your page and select Preview (by clicking the buttons or by using the keyboard shortcuts) to make sure the statistic on your page is what you expected.

Now - on to styling! We want that number to reach out and GRAB YOU!!!!

Step 4: Add styling via a Wrapper component.

image4

  1. We’ll put this Rich Text component in a Wrapper to more easily style it. The style attributes I’m using here are:
    • Background color: #548dd4
    • Border and Padding: Padding 1em all around
    • Color: white (Click Style Attributes > + to add a new attribute. I’m adding the color attribute which will affect the text color at runtime)
    • Border-radius: 5px (This will round the corners so this wrapper isn’t so pointy.)
  2. Additionally, I set these properties in the Rich Text component:
    • Font: Trebuchet
    • Size: 24
    • Bold
    • Alignment: Center
  3. Instead of taking up the full width of the screen, I want this Wrapper to be in a left column. I achieved this by adding a Responsive Grid with two divisions and putting the Wrapper in the left division and setting that division’s behavior as “Fit to Content.”

Step 5: Enjoy your handiwork!

image5

Sit back and ask yourself one of the following: “How much time did I just save? Can I get a raise? Can I take an early lunch?”

But wait - there’s more…

Step 6. Client Side Calculations with UI-Only Fields.

Sometimes your aggregate model can only get you so far and you still need to do more calculations. One customer wanted to show a monthly recurring revenue. While we could add a formula field in Salesforce, or create a custom component to achieve this via Javascript, we could also do this with UI-Only Formula fields.

A. Create a model to bring in annual revenue information and add a Ui-Only Field.

image6

In this case, I created another aggregate model, this time on the Line Item object with these properties:

  • One aggregation: a sum of the Total Price field.
  • All conditions necessary to narrow this model to annual recurring revenue, e.g. only include Line Items from Closed Won Opportunities.
  • Then I clicked Aggregations > Add Ui-Only Field to create my MRR field (see below).

B. Configure your UI-Only Field

image7

  1. Click on your Ui-Only field to configure it.
  2. Create a Field Id (for internal use) and a pretty Label to display to users.
  3. Choose Formula as the Display type.
  4. Choose Currency as the Display type
  5. Set up the Length and Decimal Places as you like.
  6. Click on the Formula tab.
  7. Enter the formula, in this case we’ll take the Total Price aggregation, our yearly recurring revenue, and divide it by 12. e.g: {{{sumTotalPrice}}}/12

C. Add another Wrapper and Rich Text component to display your formula field.

image8

  1. First, I created a Wrapper and Rich Text component that are identical to the ones from Step 4. You can manually set up the new Wrapper, or cheat like I did and go into the XML to copy the first Wrapper and paste the copy in below it.
  2. I added one more styling property to the second wrapper - in Border and Padding, I added a top margin of 1em, to keep the Wrappers from bleeding together.
  3. I connected the Rich Text component to the new model so that I could include the MRR field. (Note: Use {{double curly brackets}} to automatically show the dollar sign, correct number of decimal places, etc. If you want just the raw number use {{{triple curly brackets}}} instead.)

Note

Whenever you click save, the View/Edit XML link will activate the bottom right of your Skuid page - this is the mystical portal to your page XML.

Step 7: Enjoy more handiwork!

image9

Sweet success.

Need help? Ask your question on community.skuid.com.