Lightning Components comes with a series of ready-to-use components. If the component you are looking for is not available out-of-the-box (or on the AppExchange), you can easily build your own: You can build components from scratch, or you can Lightningify existing third-party components that were not originally built for Lightning. In this article, I’ll share a Lightningified version of the the popular Slick Carousel. In the example used for this article, the carousel provides a more immersive User Experience to browse through a list of candidates as part of a recruiting app.
Check out the end result in this video:
The component is implemented as follows:
- <ltng:require> is used to load jQuery and the Slick Carousel jQuery plugin (js and css files)
- Even though the carousel was not built natively as a Lightning Component, you are still building and using it “the Lightning way”: using the Lightning iterator, nesting Lightning components (CandidatePage), using Lightning attributes and events, etc.
Follow the steps below to install the component in your own org:
Step 1: Install the Application
- Enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
- Click this link to install the application using an unmanaged package, then click Continue, Next, Next, Install.
Step 2: Import Data
You currently have to disable Lightning Components for the Data Import Wizard to work correctly when importing csv files. To disable Lightning Components: In Setup, click Develop > Lightning Components, uncheck the Enable Lightning Components checkbox, and click Save.
- Save candidates.csv on your local file system
- In Salesforce’s Setup Mode, select Administer > Data Management > Data Import Wizard
- Click Launch Wizard
- Select Accounts and Contacts
- Click Add New Records
- Drag candidates.csv to the upload area
- Click Next, Next, and Start Import
Step 3: Add the Candidates Component to the Salesforce1 Menu
- Re-enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
- In Setup, select Administer > Mobile Administration > Mobile Navigation
- Select Candidates in the Available list
- Click the Add button to add the Candidates tab to the Selected list
- Click the Up button to move the Candidates tab closer to the top of the menu
- Click Save
Step 4: Test the Component in the Salesforce1 Application
- In Salesforce, remove the part of the URL that comes immediately after salesforce.com and append /one/one.app to the URL immediately after salesforce.com
- This starts the Salesforce1 Application simulator
- Click the menu button in the upper left corner
- Select Candidates in the menu
- Swipe left and right to navigate through the list of candidates
- Click the candidate’s name to view the candidate’s standard details page
- Click the Back button to go back to the carousel
As a relatively new component framework, Lightning Components may not yet have all the components you are looking for available out-of-the-box. When a specific component is not available, Lightningifying an existing third party component can be a great alternative to building the component from scratch.