Gotchas with using SLDSX Components

sflabs The new Salesforce Lightning collection includes a set of open-source user interface design components that were developed by Salesforce Labs. And why would you want to use these? (you might be thinking).

Well, they are built to use the SLDS (Salesforce Design System) which I blogged about in the last post. It is like Bootstrap for Salesforce. Except, that it just provides the CSS and in order to implement the components you also need JavaScript. Well, this is where the SLDSX comes in. With SLDSX you get the following beautifully styled and responsive components installed directly into your org:

  • Breadcrumbs
  • Button Groups
  • Buttons
  • Grid System
  • Images
  • Badges
  • Lists
  • Media Objects
  • Pills
  • Tabs

You can check it out at the GitHub repo here. They have a great tutorial that walks you through how to use the components.

If you are designing Lightning applications, you definitely want to be using these. But a big gotcha with trying to use them is that if you have an older Dev org in which you have already setup a namespace (like I had), then they will not work and you will get errors trying to install them.

So, in order to use them, you will have to spin up a new Dev org and make sure you enable My Domain AND that you go back to Domains in Setup and click the Deploy to Users button before you will be able to access them.

And here is one more gotcha: If you spin up a new org, you will get a copy of the SLDS as a static resource in your new org, but it is an older version. You really need to work with the latest version of the SLDS, which you can download here. You will need to first delete the current SLDS static resource and replace it with the latest version, which as of this post is 0.12.1.

Once you have them installed, just checkout the tutorial and if you have used Bootstrap you should find them pretty straightforward.

Let me know what you think.

 

SLDS is Bootstrap for Salesforce

I have been immersing myself in the new world of Lightning and one (note the word “one”, because there is more than one) of the most impressive parts about it is the new SLDS or Salesforce Lightning Design System.

You can just think of it as Bootstrap for Salesforce since it works very much the same as Bootstrap does for regular HTML-based apps. It just incorporates all the best Salesforce specific design options you can use into one very easy to use package.

Adding it to your Lightning app is a breeze and requires only that you use the <ltng:require> tag such as this:

<ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system-ltng.css"/>

Once you have included this, then you just reference the library in your HTML code like this:

<button class="slds-button">New Button </button>

Notice the class tag? That is how you reference it. And that is how you get a nice stylized button that has the latest style that will always be updateable and current

One big gotcha to be aware of thought is that you must wrap all your HTML that uses SLDS in one div tag that uses the the class name of “slds”. For example, the button component I had listed above would not work until I added the surrounding div (NOTE: I cannot include this as formatted code because some weird WordPress issue keeps deleting the code):

That’s it. Easy peasy!

If you have not already checked it out, I strongly encourage you to do so. Every Lightning application should be using it!

Enjoy!