Lightning never strikes twice in the same place.
Hello there,

Thanks for stopping by 🙂

200w (3).gif

I’d like to welcome you all and give you a gist of what this blog is all about. I had been working for the past couple of weeks on Lightning Design System and AngularJs, So thought of sharing my knowledge with wonderful and intelligent Salesforce community. In this blog, I am solemnly focusing on Salesforce Lightning Design System, not on Lightning component or lightning App builder.

A few months back I got the requirement to create a page that should work on all the devices starting from desktop to all the mobiles, tabs and IPad running on IOS, win, Android platform. So, how the heck do you apply the same design principles to a heterogeneous environment like this? And even more importantly, how can you keep changing the design in the future without causing major work for the development teams? Ans is Lightning design system.

In this blog, I am going to brighten things up with lightning Strikes.

ROTJ-ForceLightning2alt4.gif

Prerequisites:

Before Starting with actual demonstration, let’s have look at the prerequisites,

1. Salesforce Lightning Design System basic Introduction, I have covered Lightning Design System Introduction in the previous article and I would also suggest you go through awesome Trailhead module.

2. While example demonstration I have assumed that you have some knowledge of web development (HTML, JavaScript) and Salesforce administration.

3. Basic knowledge of AngularJs is strictly mandatory, you can get a nice overview of Angular JS here.

4. Download the ‘Salesforce Lightning Design System’ Custom Scoped CSS from here, place your desired scoping class name into the “Scoping class” input and click Generate CSS. This Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts. Scoping class name example:slds

5.Download the scoped version of the Design Systems files and upload Zip folder as your static resource.

6. As I am using Angular Js in my code, I have included angular Js file in code. Download AngularJS file from here and upload to a static resource.

The structure of uploaded(Lightning Design System) zip file and SLDS Class Naming convention:

Before jumping into page design aspects and its related components lets understand the structure of uploaded(Lightning Design System) zip file and SLDS Class Naming convention as per trailhead modules,

  • assets/
    • fonts/ – the new “Salesforce Sans” font
    • icons/ – the Design System’s icon library
    • images/ – other images, such as spinners
    • styles/ – contains the base CSS, which defines the components and utilities that make up the Design System. All the CSS is fully namespaced with the slds prefix.
      • salesforce-lightning-design-system-vf.min.css – This is the version of the CSS you will use in Visualforce with relative links for the static resource
      • salesforce-lightning-design-system-ltng.min.css – Another version of the CSS, especially compiled for Lightning
  • scss/ – the Design System is generated using the Sass pre-processor. If you would like to customize any of the visual design, such as colors or spacing, you will be working here. 

 

SLDS Class Naming

Before we move on, lets talk about those double hyphens you were asking about in the Design System class names. CSS uses a standard class naming convention called Block-Element-Modifier syntax (BEM) to make the class names less ambiguous:

  • block represents a high-level component (e.g. .car)
  • An element represents a descendent of a component (e.g. .car__door)
  • A modifier represents a particular state or variant of a block or element (e.g. .car__door–red)

Now the burning question, why the double hyphens and underscores? First, they make it easier to see what the CSS rule is being applied to (by separating out block/element and modifier). Furthermore, using double rather than single hyphens and underscores means that the block or modifier can itself contain hyphens or underscores, for example .slds-button__icon–x-small

Look & Feel:

For Demonstration purpose I have considered Campaign as Group Event and Campaign Members as Group Event members, so in this article, we will create new Group event and add its related group event members.

Yeah, I know … I know, you must be interested in doing hands-on experience instead of just reading and looking at the content. So, I have also created a Demo Page for hands-on Experience

  1. Create Group Event

 

1st-save-new

Create Group Event

 

As shown above gif, I have considered the +ve flow of group event creation. There are several components that I have already covered in previous articles So I won’t be digging into deep understanding.

Group event creation consists of various page attribute, I have kept it minimal for demo purpose. Group event name is a text field and mandatory field. Account Name and Speaker are basically lookup fields which I have already covered in the previous Article, Speaker is a lookup to contact object and will return the record where the speaker (Custom field) is checked.

Next page attributes are a group of Picklist fields, you can click on hyperlinks to get more details about normal picklist and Multiselect Picklist. Next attribute is Date picker, It was really challenging to add date picker functionality using Lightning design system, but yeah it’s doable as I believe that, Everything you think, is a Logic if it’s a Logic it can be Coded :). Visit my previous blog to get a detailed demonstration about building lightning Date picker by clicking here.

Other page attributes are buttons which allow you to perform an action, navigate to a new section and refreshing a page.

2. Add Location Details:

 

location-details

Navigate to new section and add location details

Above gif, shows navigation to a new section(Location section), adding location details and coming back to the main section, section show/hide are handled using simple AngularJS show/hide functionality.

 

When the group event is created, the success message pops – up on the page, curious to learn more about creating success popup, warning popup or error popup, click here to get detailed explanation and code.

3. Handling Page level Validation

 

error-message

Handling Validation

We have already covered basic +ve flow of the page, now in the above GIF image, I have covered -ve flow. As shown in GIF image, if we escape any mandatory field(s) it will throw an error message on the escaped mandatory field(s) as soon as we click on save button. This error messages are handled using custom angularJs function before making remoting call to the server. When you enter value to mandatory field, here comes the beauty of AngularJS, as angularJS follows Single Page Application(SPA) framework, the error message disappears immediately without even clicking on save button 😀

 

4. Add Group Members,

 

add-members

Add Group event members

Let’s move on, In above GIF Image, I am navigating to the new section to search and add Group member(s) of the event. As per implementation when we enter a value in Account name search field, it will get the all the related contacts of that account as a search result. Basically, account search field is lookup, click here to get more information about how to create lookup field using Lightning design system. All the selected members will be added as group members associated to the group event.

Furthermore, I have also added search functionality on related contacts Data table, which will be really helpful when contact data table size is relatively higher and pagination isn’t feasible.

The main advantages of navigating to new section and hiding the existing one is, when we open this page in mobile or tab it won’t be a mess and every section will be clearly reachable and visible to the user(Almost all the social website are following this technique, Like facebook has different sections for notification, message and friend request).

 

5. Remove Group Members,

 

remove-members

Remove group event members

Hold on, it’s not the end of this page, as we have given the add event member functionality, remove member functionality is really essential. In above GIF image, we can see the cross button associated with each group member record in the data table is used for removing an element from the data table.

 

Github Repo:
The code is available on Github.

Note: You need to replace the all static resource name with your static resource name.

Woooooo … Looks like we have successfully completed the Built of next generation Visualforce Page Utilizing Salesforce Lightning Design System without doing any of your own CSS. Pretty Cool, isn’t it?

Reference :

  1. Lightning Design System
  2. Lookup – Lightning Design System
  3. Salesforce Trailhead – Lightning Design System

What’s Next?

Keep your eyes on upcoming blog entry – Built Visualforce page Utilizing Salesforce Lightning Design System and AngularJs part – II.

I would appreciate if you could share your thoughts in the comments section.

Happy Coding 🙂

Thank you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s