Stock Market Updates Lightning Component

In this article, I will be showing you how to build a stock quote Lightning Component with HighChartTable chart and Yahoo’s YQL(Yahoo Query Language) web service. You can use this component to see Stock Market Updates of any Company and of any StockExchange provided by the Yahoo API.

YQL is like SOQL language that allows you to query, filter and combine data from multiple sources across both the Yahoo! network and other open data sources. Yahoo made things easy on us by providing a very intuitive console for accessing data via the API. You can read complete documentation about YQL. HighChartTable charts are used to represent your data as Charts and Graphs. HighChartTable chart can not be used for commercial purposes.

Installation Instructions

Follow the steps below to install the Stock Update component and create the application in your own Developer Org.

Step 1: Install the Component

1. Enable Lightning Components in your new Developer Org:
   In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
2. Click this link to install the StockUpdates component using an unmanaged package.

Step 2: Enter Sample Data

1. Click the StockSymbols tab and enter your favourite Company’s records with their Symbol and Stock Exchange Name.

For example, enter the following values:

Salesforce :
Company : Salesforce,
Symbol : CRM
StockExchange : NYSE

Apple
Company : Apple,
Symbol : AAPL
StockExchange : NASDAQ

Google
Company : Google,
Symbol : GOOG
StockExchange : NASDAQ

Step 3: Add the StockUpdates Component to the Salesforce1 Menu

1. In Setup, select Administer > Mobile Administration > Mobile Navigation.
2. Select StockUpdates in the Available list.
3. Click the Add to add the StockUpdates tab to the Selected list.
4. Click the Up button to move the StockUpdates tab closer to the top of the menu and click Save.

Step 4: Test the Component in the Salesforce1 Application

1. 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.
2. This starts the Salesforce1 Application simulator.
3. Click the menu button in the upper left corner.
4. Select Stock Updates in the menu.
5. Select any company from drop down list.

About The Author

My name is Balkishan Kachawa, I am a Force.com Certified Developer working as a Salesforce Technical Consultant.
I have 4+ years of experience in Force.com implementations, using various technologies like PHP, JAVA, J2EE, jQuery, Angular, Js, BootStrap. I have worked on various APIs (like Google, Yahoo, Drop Box etc) with Force.com.

Follow me here: