Mohith ShrivastavaSalesforce MVP, Salesforce Engineer CodeScience INC

mohith@codescience.com@msrivastav13

Introduction To Lightning Out

• Founded in 2008

• 75 Employees

• Offices in Chattanooga & San Francisco

• Built 90+ products on the AppExchange

• Clients range from Fortune 5 to five-person startups

• Your SaaS is in our hands: we empower SaaS businesses by providing professional services centered on the Salesforce platform.

• Lightning Certified PDO & first partner in Product Development Outsourcing (PDO) program

• @codescience

Forward-Looking Statements

Statement under the Private Securities Litigation Reform Act of 1995:

This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.

The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.

Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Lightning Component Framework

Javascript Framework that helps you build javascript applications by dividing into components

Build once and use everywhere

1. App builder

2. Community builder

3. Salesforce1

4. Visualforce

5. External apps outside salesforce (Node ,Sharepoint ,Office 365)

Introduction To SLDS

Salesforce Lightning Design System is an open source CSS Framework to design and build UI with unified experience .

Benefits of SLDS1. Design guidelines for

designers

2. Complete Markup for developers

3. Design Tokens

4. Responsive

DemoSalesLeaderBoard App

Key Takeaways

Interfaces decide where all your components can appear in salesforce

EventsUse Events to communicate between two different components .Application Events and Component Events

Use Design Attributes For Admins To Make attributes Configurable

1

2

3

Lightning Out

Take your components outside salesforce in a remote web container

Completely Secure - Supports CORS , HTTPS

Lightning components inside visualforce container is powered by Lightning Out Technology

Lightning Out Requirements

The remote web container must be able to modify HTML and CSS served on the browser .

Securely Obtain Salesforce Session Id via Oauth (Create a Connected App in SFDC) or SSO with Salesforce or use login() call

Ability to reach salesforce - If the server is behind firewall ,it needs to securely exposed to access internet

1

2

3

Create a Connected App CORS Creating Lightning Out Dependency App

The same-origin policy restricts the browser to only making an XMLHttpRequest to the same host that served the page.

extends ltng:outAppaura:dependency

Connected apps use standard SAML and OAuth protocols to authenticate, provide Single Sign-On, and provide tokens for use with Salesforce APIs

Configuration In Salesforce For Lightning Out

Heroku Node Application Demo

Uses web server oauth for authentication

Uses EJS Templates

App URL - https://protected-fortress-46904.herokuapp.com/

Sharepoint Demo

Uses oauth for Authentication

Use napacloud to build office 365 plugins or visualstudio code

https://microsoftdevmoh.sharepoint.com/sites/Lightning/_layouts/15/start.aspx#/SitePages/DevHome.aspx

Styling Lightning Out Components

From winter 17 Lightning Design System styling is the default, and Lightning Out automatically includes the current version of the Lightning Design System onto the page that’s using Lightning Out

ltng:outAppUnstyled - Use this extension in your dependency app to for custom styles to your lightning components .

References

https://github.com/msrivastav13/DF16---Introduction-To-Lightning-Outhttps://github.com/msrivastav13/NodeLightningOut

The Code for the Mirosoft Sharepoint Plugin is available in below linkhttp://aka.ms/Ilona7

Q&A

Thank Y u@codescience