tag:blogger.com,1999:blog-91994346482968764942024-03-28T00:32:37.859-04:00cloudyMohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.comBlogger91125tag:blogger.com,1999:blog-9199434648296876494.post-80098188590537997652016-09-13T18:05:00.001-04:002016-09-13T18:05:55.426-04:00Introducing Lightning Base Components<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">Lightning
Base Components are great addition to the platform and in fact
revolutionary .One of the concerns around lightning component
development had been need to write too many lines of code and wire lot
of JavaScript code for simple things like handling check boxes ,select
list ,validations and so on .Having a base component library is
certainly great first step . </span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">Lightning Base Components introduced in winter 17 release is documented <a href="https://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/rn_base_lightning_components.htm" target="_blank">here</a> .Please note that many of these components are in BETA mode .</span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">One
of the things as a Visualforce developer I found harder when I was new
to development was documentation did poor job to help imagine the UI and
how the components will render .I see the same issue with lightning
components developer guide .</span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">While
the base components are listed and sample code is shown ,still to my
fellow designers I am sure this is night mare to imagine or even for
developers there will need to copy paste the code and preview how the
markup renders which is definitely not respecting their time .</span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">I quickly made a small documentation that would help the designers as well .</span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">Here is the link to the documentation on git </span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;"><a href="https://github.com/msrivastav13/Base-Lightning-Components/wiki/Lightning-Base-Components-Designer-Guide" target="_blank">https://github.com/msrivastav13/Base-Lightning-Components/wiki/Lightning-Base-Components-Designer-Guide </a></span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">Here is a small unmanaged package in case you want to play around with all components </span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">The package contains all components inside a simple lightning App Page </span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB00000003tU7"><span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB00000003tU7</span></span></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;">Note that there is lot of attributes that provides ability to do lot of Javascript actions declaratively and we will dig into each one of them via separate blogpost where I will test each of them and leave my experience and feedback . </span></span></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;"> </span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: large;"><span style="font-family: Georgia,"Times New Roman",serif;"> </span></span></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com26tag:blogger.com,1999:blog-9199434648296876494.post-84816719169520592002016-08-03T17:19:00.001-04:002017-04-28T02:04:53.262-04:00Automatic GeoCoding Feature In Salesforce - Summer 16<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif; "><br /></span></span></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Summer 16 provided an excellent feature to the force.com platform of automatic adding GeoCodes to the address Data .The Feature is currently available for<b> <span style="background-color: white; display: inline ! important; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">addresses on existing and new accounts, contacts, and leads and in salesforce classic .</span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style=""><b><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">With Location aware Data one can build very cool visualization and help business achieve its goals .</span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="><b><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">I have a very interesting business scenario and lets discuss how we are going to solve the use case with this new feature</span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><span style="font-family: "georgia" , "times new roman" , serif;"><span style=""><u><i><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Business Use Case</span></i></u></span></span></b></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style=""><b><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Universal Containers is planning to hire sales folks and since they are global they want to hire sales folks in countries where there are maximum no of leads located so that they can reach out in person and demo their products .</span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style=""><b><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Sales VP requested a plot of leads location on the world map so that he can start his hiring strategy .</span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style=""><b><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Also marketing VP wanted to know areas where there are no leads so he can focus his campaigns in those areas .</span></b></span></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style=""><b><span style="background-color: white; display: inline; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><b>Enable Data Clean Feature</b></span></b></span></span></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Enabling the Automatic Geolocation mapping for address requires you to enable setting a clean rule in data.com settings .Please check below screenshot</span></span></span></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://4.bp.blogspot.com/-MB1Pi5VajU0/V6JfOJP1LsI/AAAAAAAACSg/yd9Z1eLngpQM37C4zdeCAMKKUQ7uxq0PACLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="289" src="https://4.bp.blogspot.com/-MB1Pi5VajU0/V6JfOJP1LsI/AAAAAAAACSg/yd9Z1eLngpQM37C4zdeCAMKKUQ7uxq0PACLcB/s640/Capture.PNG" width="640" /></a></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: normal;"><span style="background-color: white; display: inline ! important; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> </span><b><span style="background-color: white; display: inline ! important; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> </span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><b><span style="background-color: white; display: inline; float: none; font-family: "georgia" , "times new roman" , serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> <u><b>Solution</b></u></span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><b><span style="background-color: white; display: inline; float: none; font-family: "georgia" , "times new roman" , serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><br /></span></b></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">We will use a Javascript plugin to build our map and use salesforce location aware lead data to plot as noticeable points on the map</span></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">There are many Javascript plugins that can provide you ability to create maps .For this blogpost I will be using <a href="https://www.amcharts.com/" target="_blank">AMCharts </a></span></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">AmCharts has very cool features and with simple Javascript you can get a working app .</span></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">The Finished Solution looks like below</span></span></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "arial" , "helvetica" , sans-serif; font-style: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> </span></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://1.bp.blogspot.com/-hZqkjAz1Uo8/V6JY9aY4_mI/AAAAAAAACSU/FRKnBdikp4MTwsI8rdMk8GJZeVP0ugr6gCLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="259" src="https://1.bp.blogspot.com/-hZqkjAz1Uo8/V6JY9aY4_mI/AAAAAAAACSU/FRKnBdikp4MTwsI8rdMk8GJZeVP0ugr6gCLcB/s640/Capture.PNG" width="640" /></a></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "georgia" , "times new roman" , serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> </span></span></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline; float: none; font-family: "georgia" , "times new roman" , serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> The data is fed back via apex controller logic . We will create a Wrapper class so that its easier to point this map to a different object later ,if needed </span></span></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><span style="background-color: white; display: inline ! important; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"> </span><b><span style="background-color: white; display: inline ! important; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><u><b> </b></u></span></b></span></span></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-size: normal;"><b><span style="background-color: white; display: inline ! important; float: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><u><b> </b></u></span></b></span></span></span>
</span><br />
<script src="https://gist.github.com/msrivastav13/8c94a258ab83fc4ef79af4c9ffb90bdd.js"></script><u><span style="font-family: "georgia" , "times new roman" , serif;"><b>Conclusion</b></span></u><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Clearly looks like currently leads are located at South Easter region of United States and VP of sales needs Sales Rep in this region .Also looks like marketing needs lot of work to focus other territories apart from US .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Location aware data can clearly help your business .If you are using salesforce platform ask your VP and C level executives if visualizing data on maps help them to achieve their goals then with this feature your developers can build some cool stuff .</span></span><br />
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"></span></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com7tag:blogger.com,1999:blog-9199434648296876494.post-46077620429215939022016-06-28T23:14:00.003-04:002016-07-09T21:03:31.123-04:00TLS 1.0 has been disabled For Sandbox - Salesforce<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .</span><br />
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0</span></div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;">TLS 1.0 Explained</span></b></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-HMevofzB2xQ/V3MyTFiIP7I/AAAAAAAACM4/lTDNoSrTFVkTkgeUD5UU6T4dOc1F1As2wCLcB/s1600/TLS-Explained-680x438.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="411" src="https://1.bp.blogspot.com/-HMevofzB2xQ/V3MyTFiIP7I/AAAAAAAACM4/lTDNoSrTFVkTkgeUD5UU6T4dOc1F1As2wCLcB/s640/TLS-Explained-680x438.png" width="640" /></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;">TLS 1.1 Improvements </span></b></div>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div style="text-align: left;">
<ul style="text-align: left;">
<li><b><div style="display: inline !important;">
<span style="font-family: "georgia" , "times new roman" , serif;">Added protection against cipher-block chaining (CBC) attacks.</span></div>
</b></li>
<li><b><div style="display: inline !important;">
<span style="font-family: "georgia" , "times new roman" , serif;">Support for IANA registration of parameters.</span></div>
</b></li>
</ul>
</div>
<div style="text-align: left;">
<b></b><br />
<div style="display: inline !important;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<b>
</b></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Identify if this change broke anything .The things that can be affected in your instances are as below</span></div>
<div style="text-align: left;">
<ol style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Web requests to Salesforce URLs that require authentication</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Web requests to the login page of a My Domain</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Web requests to Community or Force.com sites</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Web requests to Customer and Partner portals</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Web to lead, web to case, and web to custom object requests</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">API requests to Salesforce</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Callouts using Apex to a remote endpoint</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Workflow outbound messaging callouts to a remote endpoint</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Callouts using Lightning Connect to a remote endpoint</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">AJAX proxy callouts to a remote endpoint</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Delegated authentication callouts to a remote endpoint</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; color: #262626; line-height: 18.2px;">Mobile apps developed with Salesforce Mobile SDK need to upgraded to SDK v4</span></span></li>
</ol>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">That's a big list and if you are an enterprise org ,then I am sure you would have at least one of the above things in your org and you may find it to be broken .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">The most common complains that I have received and encountered myself has been our IDE no more able to authenticate or our eclipse no more working ,or our migration tools are affected .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">An example screenshot of error I got last night working with my ANT tool is as below</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-NqRHx10oy-s/V3M1hep6mUI/AAAAAAAACNU/NWVeHogwOfQBPwVtaX3rfRkysWyTGUeiwCLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="66" src="https://2.bp.blogspot.com/-NqRHx10oy-s/V3M1hep6mUI/AAAAAAAACNU/NWVeHogwOfQBPwVtaX3rfRkysWyTGUeiwCLcB/s640/Capture.PNG" width="640" /></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">So below are some of the suggestions to fix this issue,</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">1. If you are using force.com migration tool and ANT process be on a latest ANT version -atleast 36.0</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">2.If you are using Java 7 ,upgrade to Java 8 since Java 8 by default uses 1.2 </span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">3.If have an integration running on a webserver ,there will be setting to disable TLS 1.0 </span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">4.You can disable TLS 1.0 in your browser </span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif; margin-left: 1em; margin-right: 1em;"><a href="https://1.bp.blogspot.com/-RFi8R0VpyOE/V3M3z6yyMDI/AAAAAAAACNw/4OGdeOGs4M056A3Iic6WWc-Du9V6dCHcQCLcB/s1600/servlet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://1.bp.blogspot.com/-RFi8R0VpyOE/V3M3z6yyMDI/AAAAAAAACNw/4OGdeOGs4M056A3Iic6WWc-Du9V6dCHcQCLcB/s640/servlet.png" width="401" /></a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">5.Look for specific configuration if you want to explicitly force tools to use TLS 1.1 or TLS 1.2 .For example if you still want to use Java 7 and force your ANT tool to use TLS 1.1 ,you can add an environment variable like below for windows </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-MKnlVgWjUys/V3M5kVAl_0I/AAAAAAAACOE/J-BHyQ0WE3k5PaO01mBEv3vDoT6SRHg8ACLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="105" src="https://4.bp.blogspot.com/-MKnlVgWjUys/V3M5kVAl_0I/AAAAAAAACOE/J-BHyQ0WE3k5PaO01mBEv3vDoT6SRHg8ACLcB/s640/Capture.PNG" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">6.If you use Java 7, disable TLS 1.0. (TLS 1.0 is disabled by default in Java 8.) Update your eclipse.ini file to include this line:</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> <span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">Update your eclipse.ini file to include this line:</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">-Dhttps.protocols=TLSv1.1,TLSv1.2 </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> <span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">The location of the eclipse.ini file depends on your operating system. For more information, see [<a href="https://wiki.eclipse.org/Eclipse.ini">https://wiki.eclipse.org/Eclipse.ini</a>].</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Hopefully this sheds some light and those of you trying to fix this issue get enough out of it and fix your issues .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">There is more info here below </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">https://help.salesforce.com/apex/HTViewSolution?id=000221207</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Feel free to ping me on twitter @msrivastav13 or reach by mail msrivastav13@gmail.com in case of concerns .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div>
<br /></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com9tag:blogger.com,1999:blog-9199434648296876494.post-48012035036556217872016-04-26T17:53:00.001-04:002017-04-28T02:10:03.005-04:00Lightning Locker Service Salesforce<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://developer.salesforce.com/docs/atlas.en-us.202.0.lightning.meta/lightning/intro_framework.htm" target="_blank">Summer 16</a> pre-release notes are out from salesforce and one of the most important featuresis Lightning Locker Service for Lightning Components.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Here is a very <a href="https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html" target="_blank">detailed article </a>on how this feature works under the hood .The article Highlights the key security features that this feature will enforce on the components.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The biggest benefit from an ISV perspective will be ability to scan the component before you submit your component for the security review.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Salesforce also released a CLI tool for all partners and app developers to run scan locally on the lightning component to discover potential security issues or unused variables and enforce security best practice and code best practice.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">In this blog I am gone to detail step by step instructions on how to Install the Salesforce Lightning CLI and Scan your components before submitting for appexchange or handing off your lightning component code to your client.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<b><span style="font-family: "georgia" , "times new roman" , serif;">Step 1 - Heroku Installation</span></b><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Depending on your OS version one can install the Heroku </span><b><span style="font-family: "georgia" , "times new roman" , serif;"> </span></b><span style="font-family: "georgia" , "times new roman" , serif;">toolbelt on your machine .The URL for the download is below</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<a href="https://toolbelt.heroku.com/"><span style="font-family: "georgia" , "times new roman" , serif;">https://toolbelt.heroku.com/</span></a><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 2 - Login via Command Line </b></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Once you install ,you can use your Heroku credentials to login in .If you have not signed up for heroku ,you can sign up for one online </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b> </b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-yLFCHtLasqs/Vx_YAq_jDkI/AAAAAAAACIU/B0AsyHCzni0t-jtXVcGysTQBwGJ2WUk6gCLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="376" src="https://4.bp.blogspot.com/-yLFCHtLasqs/Vx_YAq_jDkI/AAAAAAAACIU/B0AsyHCzni0t-jtXVcGysTQBwGJ2WUk6gCLcB/s640/Capture.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"></span><br />
<br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><span style="font-family: "georgia" , "times new roman" , serif;"></span></b></span><br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 3 -Install the Lightning CLI Plugin.</b></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">This can be installed by running following command once you login into heroku CLI</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b> </b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><span style="background-color: #f0f0f0; color: black; display: inline; float: none; font-family: monospace , sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: -0.48px; line-height: 25px; text-indent: 0px; text-transform: none; white-space: pre; word-spacing: 0px;">heroku plugins:install salesforce-lightning-cli</span></b></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 4 -Navigate to your project path where you have your lightning component project on your local drive.</b></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">If you are on windows simply CD into the project path with cd /.path</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b> </b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-OmRzUwZaHlY/Vx_Zxc_rK3I/AAAAAAAACIg/8UmwHokdlrYDfBRLlaLAO0kDMS8b4dv-wCLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="379" src="https://2.bp.blogspot.com/-OmRzUwZaHlY/Vx_Zxc_rK3I/AAAAAAAACIg/8UmwHokdlrYDfBRLlaLAO0kDMS8b4dv-wCLcB/s640/Capture.PNG" width="640" /></a></div>
<br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Step 4 - Run the CLI command to find Issues</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="background-color: #f0f0f0; font-family: monospace , sans-serif; font-size: 16px; letter-spacing: -0.48px; line-height: 25px; white-space: pre;">heroku lightning:lint .</span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-5Ob5-3BZ3so/Vx_e31roaBI/AAAAAAAACI8/qRY-ZjnJgCoxw45jAmU_8slVojW_JcloACLcB/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="360" src="https://1.bp.blogspot.com/-5Ob5-3BZ3so/Vx_e31roaBI/AAAAAAAACI8/qRY-ZjnJgCoxw45jAmU_8slVojW_JcloACLcB/s640/Capture.PNG" width="640" /></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">You can get rid of unused variables and resolve bunch of errors .</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Read further on this in below link</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://developer.salesforce.com/docs/atlas.en-us.202.0.lightning.meta/lightning/cli_rules.htm#cli_rules" target="_blank">https://developer.salesforce.com/docs/atlas.en-us.202.0.lightning.meta/lightning/cli_rules.htm#cli_rules </a></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets not just stop here ,there is a nice little documentation put together where you can add your own customized rules </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Here is the link to the documentation</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://developer.salesforce.com/docs/atlas.en-us.202.0.lightning.meta/lightning/cli_rules_customization.htm" target="_blank">https://developer.salesforce.com/docs/atlas.en-us.202.0.lightning.meta/lightning/cli_rules_customization.htm </a></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Please note that Salesforce Safe Harbour Statement applies to this post and you should not make any buying decision on forward looking statements and instead make purchasing based on current offerings of the platform .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com20tag:blogger.com,1999:blog-9199434648296876494.post-9262468159244752762016-04-08T00:43:00.001-04:002016-04-08T00:45:39.457-04:00Finding Astro - Adventure and Mystery<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://developer.salesforce.com/trailhead" target="_blank">Trailhead</a> is an awesome platform to learn and explore Salesforce . Whether you are an admin,developer or consultant on Salesforce Platform ,Trailhead is a fun way to gain an understanding of the amazing platform .</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_wheres_astro.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_wheres_astro.png" width="200" /></a></div>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">One of the most exciting badges for this release has been <a href="https://developer.salesforce.com/trailhead/module/wheresastro" target="_blank">WheresAstro module on Trailhead</a> .Astro went missing on April 1st and you have time till April 14th to find it .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://res.cloudinary.com/hy4kyit2a/image/upload/v1457990667/doc/trailhead/images/wheres_astro_discovery_1_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://res.cloudinary.com/hy4kyit2a/image/upload/v1457990667/doc/trailhead/images/wheres_astro_discovery_1_1.png" width="400" /></a></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Key Motivator To Complete this Challenge</span></h3>
<span style="font-family: "georgia" , "times new roman" , serif;">The key motivator to complete the challenge is you may be a lucky winner to win a fit bit or an Astro Doll . </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://res.cloudinary.com/hzxejch6p/image/upload/v1459473527/2016-03-400x400-trailhead-wheresastro-blog_hmjcop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://res.cloudinary.com/hzxejch6p/image/upload/v1459473527/2016-03-400x400-trailhead-wheresastro-blog_hmjcop.png" height="320" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://d3rnld1uo6kgq2.cloudfront.net/influitiveimages/salesforcedevs/attachments/original/351.?1459969750" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://d3rnld1uo6kgq2.cloudfront.net/influitiveimages/salesforcedevs/attachments/original/351.?1459969750" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Journey and Exploration </span></h3>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">This modules requires your 30-40 minutes of time and its totally fun .You will start your journey by supporting the global search by changing your profile picture on the social media .</span></div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/social/wheres-astro-profile-overlay.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://developer.salesforce.com/resource/images/trailhead/social/wheres-astro-profile-overlay.png" width="320" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Don't worry there is already a nice heroku app running that will help you with background image .</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Also you will discover some notes to download and read .</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Start taking help of developer org to discover the mystery .You will learn how to create a simple developer org and use standard salesforce Accounts and contacts . You will enter all suspects using in contacts and your account is Trailhead .</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<h4 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Unlocking the clues</span></h4>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">In this reading of 15 minutes you will learn how to use Geolocation fields .You will map all your suspects (AKA Contacts) on the google maps using location field . </span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://res.cloudinary.com/hy4kyit2a/image/upload/v1458263336/doc/trailhead/images/wheresastro_before_its_too_late_3_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://res.cloudinary.com/hy4kyit2a/image/upload/v1458263336/doc/trailhead/images/wheresastro_before_its_too_late_3_1.png" width="320" /></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h4 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Follow the Trails</span></h4>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Use your dog and keep adding all those your dog finds to the contacts so that you can finally locate </span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://res.cloudinary.com/hy4kyit2a/image/upload/v1458263341/doc/trailhead/images/wheresastro_before_its_too_late_3_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://res.cloudinary.com/hy4kyit2a/image/upload/v1458263341/doc/trailhead/images/wheresastro_before_its_too_late_3_2.png" width="320" /></a></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Cracking the Code</b></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Finally this is where you need to be extra cautious and complete the mission .</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b> </b></span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">So why wait ..Hurry up and head to the Trail and find missing astro and all along the journey learn how to use force.com and salesforce to manage your business</span></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b></b><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-u0H3NO125H8/Vwc131oPm-I/AAAAAAAACHc/WFTNJHBaSjgvzySMVXOMSFYsatUnZfRrw/s1600/28rhXaeXRgeFcNajcevFm3ns.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://4.bp.blogspot.com/-u0H3NO125H8/Vwc131oPm-I/AAAAAAAACHc/WFTNJHBaSjgvzySMVXOMSFYsatUnZfRrw/s400/28rhXaeXRgeFcNajcevFm3ns.jpeg" width="400" /></a></div>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-weight: normal;">Don't</span><b><span style="font-weight: normal;"> forget to share your journey through your blogs </span></b><span style="font-weight: normal;">or tweet your tweets using @Trailhead </span></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com3tag:blogger.com,1999:blog-9199434648296876494.post-11986090869208307862016-03-29T20:12:00.001-04:002016-03-29T20:12:38.437-04:00Taking your Lightning Components Outside Salesforce - Lightning Out<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_lightning_out.htm" target="_blank">Lightning Out </a>is a powerful feature where you can take your components built inside SFDC to the external system .The Program is under BETA currently .</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">I have been building lightning components since last year and this year more than half of my time I have been working with lightning components .In fact this year in one of the community led conferences,<a href="http://www.southeastdreamin.com/" target="_blank">SEDreamin</a> in Atalanta ,I along with one my colleague architect at CodeScience INC got opportunity to present on lightning components .</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">If you are interested on slides ,we have the slides on the <a href="http://www.slideshare.net/MohitkumarSrivastav/lightning-strikes-twice-sedreamin" target="_blank">slideshare</a> and also the code on the <a href="https://github.com/CodeScience/seDreamin" target="_blank">github repo</a> .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">So in this post ,we will take one of those lightning components to outside salesforce system .We will be pushing this components to heroku .The Heroku app build will be using <a href="https://nodejs.org/en/" target="_blank">Node JS</a> .So this article assumes you have knowledge on NodeJS.</span><br />
<h4 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Libraries Used</span></h4>
<span style="font-family: "georgia" , "times new roman" , serif;">1.<a href="https://github.com/kevinohara80/nforce" target="_blank">nforce</a> - This is a utility that provides ability to obtain access token via oauth (web server flow mechanism) </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">2.A free <a href="https://signup.heroku.com/" target="_blank">Heroku </a>account .You can install Heroku toolbelt depending on your operating system</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">3.We are using <a href="http://expressjs.com/" target="_blank">express </a>and <a href="https://www.npmjs.com/package/ejs" target="_blank">ejs</a> npm package .Using Express and EJS you can build node applications super fast with minimal effort .Ejs has an awesome templating mechanism with excellent support for javascript</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Salesforce Configuration </b></span><br />
<br />
<h4 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;">1.Create a simple Connected App </span></span></h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vx-CsfCR3Wbq203WTZwB4zZmbsCB1xqrYDv70cOtjs1HkGYMJPkuRhzDa6BsX6Itamgf937i2RgPbA9cCqMKkxk-lvGLm7RngQvTsTY3OQ1K9MKbwf8LddU7kHgvouFCm-Lowk6jstIA/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vx-CsfCR3Wbq203WTZwB4zZmbsCB1xqrYDv70cOtjs1HkGYMJPkuRhzDa6BsX6Itamgf937i2RgPbA9cCqMKkxk-lvGLm7RngQvTsTY3OQ1K9MKbwf8LddU7kHgvouFCm-Lowk6jstIA/s640/Capture.PNG" width="640" /></a></div>
<h4 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"> 2.Create a CORS recor<span style="font-family: "georgia" , "times new roman" , serif;">d for your heroku domain </span></span></span></h4>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;">This is a security feature again and found in sec<span style="font-family: "georgia" , "times new roman" , serif;">urity controls</span></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"> </span> </span></span><b></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVByvnecGwyzb8y4Yue1ftQ9f1TXfAG3S6_4JU-BBVB2sLi54zrkQgfCMCvIZXmHNMahF5-8PvNja7-N6QYlf8F51n6HPwZ7K2H6JEoowrEMXeSD_Kbq4yld80Xb7P-o9yt7D4S_ucPmT/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVByvnecGwyzb8y4Yue1ftQ9f1TXfAG3S6_4JU-BBVB2sLi54zrkQgfCMCvIZXmHNMahF5-8PvNja7-N6QYlf8F51n6HPwZ7K2H6JEoowrEMXeSD_Kbq4yld80Xb7P-o9yt7D4S_ucPmT/s400/Capture.PNG" width="400" /></a></span></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Lets take a look at the app.js file which triggers the flow</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><script src="https://gist.github.com/msrivastav13/1d31f7da16e40e2e48997bb8544ba708.js"></script></span><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;">H<span style="font-family: "georgia" , "times new roman" , serif;">ere are <span style="font-family: "georgia" , "times new roman" , serif;">the key hig<span style="font-family: "georgia" , "times new roman" , serif;">hlight <span style="font-family: "georgia" , "times new roman" , serif;">from the code </span></span></span></span></span></span><br />
<ol style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"> </span></span></span></span></span>We use the nforce library to request for the oauth token </span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">We store the oauth token using app local variables so that we can retrieve this in our templates</span></li>
</ol>
<span style="font-family: "georgia" , "times new roman" , serif;">Here is the code for Homepage of the app</span><br />
<br />
<script src="https://gist.github.com/msrivastav13/e26cefbc84c2e7f4cadb4a229d376e79.js"></script> <br />
<span style="font-family: "georgia" , "times new roman" , serif;">The key points to look for</span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">1.Observe how simple it is to write four lines of code<span style="font-family: "georgia" , "times new roman" , serif;"> to inject the lightning component into th<span style="font-family: "georgia" , "times new roman" , serif;">e page</span></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;">2.The EJS <span style="font-family: "georgia" , "times new roman" , serif;">template engine ma<span style="font-family: "georgia" , "times new roman" , serif;">kes our life lot simpler to injec<span style="font-family: "georgia" , "times new roman" , serif;">t <span style="font-family: "georgia" , "times new roman" , serif;">variables .</span></span></span></span></span></span></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;">The entire code is in my <a href="https://github.com/msrivastav13/NodeLightningOut" target="_blank">github repo</a> if you want to take a peek . </span></span></span></span> </span></span> </span><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets watch the video of the component running outside SFDC </span><br />
<br />
<br />
<br />
<iframe src="https://player.vimeo.com/video/160820242" width="500" height="260" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br/>
<p><a href="https://vimeo.com/160820242">Lightning Out</a> from <a href="https://vimeo.com/user45179519">Mohith Kumar Shrivastava</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<br />
<br />
Please let me know the feedback on this post via twitter or mail . Happy Hacking :)
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com11tag:blogger.com,1999:blog-9199434648296876494.post-59943581894750413642016-02-28T21:44:00.000-05:002017-04-28T02:20:57.020-04:00Lightning Events Via Visualforce<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">This post is again as per request from one of my friend .He wanted me to put together a simple demonstration of how to handle lightning events from visualforce and how to publish or fire lightning events from outside salesforce .Both of these cases are extremely common if you are building application using <a href="https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm" target="_blank">lightning for visualforce </a>.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">If you have already started adopting Lightning component framework ,you probably know how important are <a href="https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_events.htm?search_text=Events" target="_blank">Events </a>.There are two types of events , Application events and Component Events .Please note that prerequisite for understanding this blog is understanding of events in context of lightning component framework .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The below code snippets apply to only application events .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3 style="text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">1. Firing Events from the Visualforce and Handling the Events in lightning components</span></b></h3>
<div>
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">To demonstrate this ,lets create a simple event file and fire the event from the visualforce inside the callback and handle the event back in the lightning component file</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Below is the component set up for lightning framework</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<script src="https://gist.github.com/msrivastav13/f8a9d4ceaab5100cac7a.js"></script><span style="font-family: "georgia" , "times new roman" , serif;">
Lets put together the visualforce code needed for the experiment</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/5307e61cce8db4892463.js"></script>
</div>
<span style="font-family: "georgia" , "times new roman" , serif;">Here are the exciting results</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-4mW_6DSdQy8/VtOQIfW1RqI/AAAAAAAACEA/ul0ZZCY_ZEQ/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="222" src="https://3.bp.blogspot.com/-4mW_6DSdQy8/VtOQIfW1RqI/AAAAAAAACEA/ul0ZZCY_ZEQ/s640/Capture.PNG" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b>
<b><br /></b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b>
<b><br /></b>
<b><br /></b>
Now this opens a world of new opportunities to mash up already existing visualforce UI with lightning component framework.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">One sample project that i experimented <a href="https://github.com/msrivastav13/LightningOutMapComponent" target="_blank">is in my git repo</a> which takes map component as a lightning component but receives pickers from the visualforce select option .</span><br />
<h3 style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br />2.Firing events from the lightning component and handling the event inside visualforce</span></h3>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">This is another interesting observation ,you can fire an event from the lightning component and handle the event inside visualforce .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets see the hello world code for this scenario</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/2b214b9cc709d7aba3c2.js"></script></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">The visualforce code is as below</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/69014c360ac5fff683a3.js"></script></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Fun part
</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-NdgHUblIUTg/VtOvyxhxzZI/AAAAAAAACEQ/Y8szsDb_y1A/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="224" src="https://3.bp.blogspot.com/-NdgHUblIUTg/VtOvyxhxzZI/AAAAAAAACEQ/Y8szsDb_y1A/s640/Capture.PNG" width="640" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">
</span>I hope this opens up a whole world of new directions to design and build some excellent mashups with visualforce and lightning .<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Please reach out via my twitter @msrivastav13 or mail msrivastav13@gmail.com.</span></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com60tag:blogger.com,1999:blog-9199434648296876494.post-29771524962470163632016-02-21T19:17:00.002-05:002016-02-21T19:49:31.667-05:00Opening Modal Using Lightning Component Framework of SFDC<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">So here we start ..</span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Business Use Case </b>- Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .</span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The component can be dragged in lightning design experience or in App builder lightning Page .</span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Video Demonstration-</b></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><iframe allowfullscreen="" frameborder="0" height="263" mozallowfullscreen="" src="https://player.vimeo.com/video/156198302" webkitallowfullscreen="" width="500"></iframe> </span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://vimeo.com/156198302">SalesLeaderBoard</a> from <a href="https://vimeo.com/user45179519">Mohith Kumar Shrivastava</a> on <a href="https://vimeo.com/">Vimeo</a>.</span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-3iyXj8IqRAo/VspIsGIgYGI/AAAAAAAACDI/kO9ZzBqfOLQ/s1600/Capture11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="137" src="https://1.bp.blogspot.com/-3iyXj8IqRAo/VspIsGIgYGI/AAAAAAAACDI/kO9ZzBqfOLQ/s640/Capture11.PNG" width="640" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-61ezQptd49E/VspIyf13oBI/AAAAAAAACDM/UfEBnoAZFOg/s1600/Capture12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" height="243" src="https://4.bp.blogspot.com/-61ezQptd49E/VspIyf13oBI/AAAAAAAACDM/UfEBnoAZFOg/s640/Capture12.PNG" width="640" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Frameworks Used -</b></span></span><br />
<ol style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Lightning Design Systems (SLDS) for CSS</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Lightning Component Framework for client side logic</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">Apex aura enabled class for backend logic</span></li>
</ol>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Approach</b></span><br />
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">The component hierarchy is very important to imagine or mindmap before we dig deeper</span></li>
</ul>
<span style="font-family: "georgia" , "times new roman" , serif;">- SalesLeaderMain</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> -SalesLeaderBoard</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> -SalesLeaderBoardCard</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> -SalesLeaderDetail</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">
</span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">On load of page hide the SLDS modal with classes described in the style guide and once the user clicks on each individual cards use events to fire off and open the modal .</span></li>
</ul>
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Here is the core logic that control model toggle behaviour</span></span><br />
<script src="https://gist.github.com/msrivastav13/46f554dbf4e6f6c79179.js"></script><span style="font-family: "georgia" , "times new roman" , serif;">
The JS controller
<script src="https://gist.github.com/msrivastav13/95f60556fc7c55e97a11.js"></script>
The Helper </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/4df7886af1b2dfaf3989.js"></script>
<span style="font-family: "georgia" , "times new roman" , serif;"><i>
<span style="font-family: "georgia" , "times new roman" , serif;">Use application events to communicate between components and the message of event carry the respective ID of the User .</span></i></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Double check to name event file in small letters else the application events dont work
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/b42c8503d7b13fb0f268.js"></script>
<span style="font-family: "georgia" , "times new roman" , serif;">Below is the github link for all code </span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://github.com/msrivastav13/SalesLeaderBoard">https://github.com/msrivastav13/SalesLeaderBoard</a></span></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The code in the repository is self explanatory but if you need more explanation feel free to reach me on <a href="https://twitter.com/msrivastav13" target="_blank">twitter</a> or via my mail(msrivastav13@gmail.com) .</span></span><br />
<br /></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0tag:blogger.com,1999:blog-9199434648296876494.post-45664025200923596652016-02-17T20:43:00.001-05:002016-02-17T21:02:11.461-05:005 Reasons you want to get new set of Trailhead Badges On TrailHead<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">Last night I smashed new badges available on <a href="https://developer.salesforce.com/trailhead/">Trailhead</a> and here are 5 main reasons I would recommend all devs and consultants to grab them </span><br />
<br />
<h3>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>Get a feel of new release features upcoming in Spring 16 release </b></span></li>
</ul>
</h3>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_spring16_release.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_spring16_release.png" /></span></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Spring 16 release has lots of exciting new features .Either you are business consultant or developer with the platform ,you will be amazed to see new features added for lightning components lightning experience ,sales cloud ,service cloud ,marketing ,community cloud and analytics cloud .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Please note that this is a limited edition badge .Its very clear summary of whats available with Spring 16.So hurry up !!!</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h3>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>ISV App Strategy </b></span></li>
</ul>
</h3>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_isv_app_strategy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_isv_app_strategy.png" /></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Are you planning to get your application on appexchange and make some money ? App Strategy module is for you .There are critical things to understand when it comes to app marketing .Do you want to dig deeper in terms of terminology like OEM and ISVForce ,this module will be ideal read .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">If you are solution architect working for ISV companies ,you should definitely read this . The modules digs deeper into specific areas like which edition and what should be licensing model for various applications and business needs .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<h3>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>Hands on experience with asynchronous in Apex </b></span></li>
</ul>
</h3>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_asynchronous_apex.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_asynchronous_apex.png" /></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">This module is a must if you are technical architect and advanced developer where you want to know the options available in apex to go asynchronous .You will explore batch jobs ,schedulers , flex queues ,queueabale interfaces .</span></div>
</div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">This has some exercises for you to complete before you claim this badge but definitely worth the time as you learn lot of new stuff .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<h3>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;"><b>Microsoft and Salesforce Integration Overview and benefits</b></span></li>
</ul>
</h3>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_microsoft_integration_basics.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_microsoft_integration_basics.png" /></span></a><a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_microsoft_integration_benefits.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_microsoft_integration_benefits.png" /></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Salesforce and microsoft are in deep love .Micorsofts and salesforce both are working together to provide some cool integration's so that customers leveraging microsoft and salesforce CRM can be benefited best out of both technologies .There are two excellent modules covering some cool products like salesforce for outlook or Outlook webApp plugins ,installations ,features and functionality .</span></div>
</div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<h3>
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif;">Learn some management tips and coaching tips and become self aware</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lead_great_management.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lead_great_management.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;">This is almost like getting some management tips without management degree .Overall these modules are just great and provide great insight into how to become a better manager .</span></span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;">There are 2 modules that focus on same and worth reading and they are fun.</span></span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;">Last but not least use twitter and show of your badges .Go crush it ...</span></span><br />
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pbs.twimg.com/media/CbZeE6xVIAEfkjy.png:large" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="321" src="https://pbs.twimg.com/media/CbZeE6xVIAEfkjy.png:large" width="640" /></a></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><br /></span></span></div>
</h3>
</div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0tag:blogger.com,1999:blog-9199434648296876494.post-14914656398642400412016-01-30T20:24:00.002-05:002016-01-30T20:24:52.173-05:00Customizing Napili Template Of SFDC For Communities - Community Cloud <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">Recently I have been busy working with salesforce community cloud platform and I am impressed by the new added features of Spring 16 .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">You can watch the Release Readiness webinar for more details on what are added features for <a href="https://www.youtube.com/watch?v=0QbvhRS03eQ">community cloud </a></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets talk about something which most of client (Either SI or ISV ) would love to have with the Napili template .The first question that clients ask with Napili is its flexibility to customize and tailor to their specific needs .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The very straight forward questions that people familiar with Napili template ask are as follows </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Can I change the CSS and look and feel ? </b> </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"> </span><span style="font-family: "georgia" , "times new roman" , serif;">Well yes and No ....The new branding editor you can sparingly use CSS and change look and feel and community editor can also help you to some extent to change labels and the color and you can really get closer to what you want .Just note that efforts will be high if we want to change the entire template design.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Will i be able to populate data from custom objects and standard objects and Will i be able to build my own pages ? </b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Certainly yes .You can first choose your lightning templates and then build lightning components and drag and drop them .If you understand art of possibilities ,then i am sure its all about working with designer and nailing the UI with mutual consent . </span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b>Can i integrate with third party systems ?Say your knowledge or content is outside SFDC ,Say your idea portal is different ,you want Single Sign on to work as well</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The answer is yes and you will build lightning components and use apex to make callouts to external world .I have a sample <a href="https://codescience.com/salesforce-1/next-generation-communities-with-lightning-components/">blog </a>that shows how to build components for communities .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>How will I get the context variables of the lightning page so that I can pass those variables to external system to get the data related to that search item ?</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;">A simple example for this use case could be ,I am looking at Topics page of the community and I want to get data from external world related to that topic .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets go in detail here on the challenge in hand ...Take a look at one of my <a href="http://salesforce.stackexchange.com/">stackexchange </a>question i posted lately and got no response nor upvote to appreciate the question </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="http://salesforce.stackexchange.com/questions/105627/napili-template-standard-search-event">http://salesforce.stackexchange.com/questions/105627/napili-template-standard-search-event</a></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">Ok so context variables in simple terms can be imagined similar to Standard Controller ID ...So the question is how can i identify which Topic I am browsing in my lightning component to fetch matching terms related to that Topic from external world ..The document does horrible and gives no clue .Imagine its Utility for ISV apps .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lot of ISV partner would like to know the context User is browsing so that their lightning component can give right results in the widget they have on appexchange.</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">So yes Finally lets come to main aim of this post </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>How to find context variables values so that I can build my lightning component based on those ?</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Here is the hidden secret (At least no document confirming this)</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><i>Every page inside community builder is a lightning page .Check below screenshots ..</i></b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oWrJIowtn7o/Vq1NDI8ucVI/AAAAAAAAB_4/rsxp5KczojM/s1600/Capture3.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="467" src="http://2.bp.blogspot.com/-oWrJIowtn7o/Vq1NDI8ucVI/AAAAAAAAB_4/rsxp5KczojM/s640/Capture3.PNG" width="640" /></a></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><i><br /></i></b></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b><i>Also every page has some environment variables listed ,</i></b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-UQMjOyA0AfM/Vq1NTGb1v7I/AAAAAAAACAA/m_EHYCcdh2k/s1600/Capture22.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="302" src="http://3.bp.blogspot.com/-UQMjOyA0AfM/Vq1NTGb1v7I/AAAAAAAACAA/m_EHYCcdh2k/s640/Capture22.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Lets try to capture these and read these via lightning component to see what they actually have </span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><i>A sample lightning component code to read the Topic name can be as below</i></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<script src="https://gist.github.com/msrivastav13/fd45b33a42c41d709c58.js"></script>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<script src="https://gist.github.com/msrivastav13/b87defbab1b2db8d6794.js"></script>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<script src="https://gist.github.com/msrivastav13/1a812e48a6b82978e3da.js"></script><span style="font-family: Georgia, Times New Roman, serif;">
The Design file is most important to capture environment variables
</span><script src="https://gist.github.com/msrivastav13/73612fbd6f721c34f92a.js"></script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Georgia, Times New Roman, serif;">The apex code ::
</span><script src="https://gist.github.com/msrivastav13/11c85062a4e3e4c2c679.js"></script>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">The last part is configuration when the component is dragged to community builder .Place the exact context variables to derive values from them </span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-H-MaL1JRdKw/Vq1g-rFMT7I/AAAAAAAACAM/9_ndjRe6K2U/s1600/Capture3753.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="130" src="http://4.bp.blogspot.com/-H-MaL1JRdKw/Vq1g-rFMT7I/AAAAAAAACAM/9_ndjRe6K2U/s640/Capture3753.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">The key again here is to have a design value and use same merge variables as it is used in other variables on the page .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">The output is as below when accessed in Topic page</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-tKODESOJJME/Vq1h2UQkHFI/AAAAAAAACAU/TWSh0DSO8Wk/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="182" src="http://3.bp.blogspot.com/-tKODESOJJME/Vq1h2UQkHFI/AAAAAAAACAU/TWSh0DSO8Wk/s640/Capture.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">In short the conclusion is ---"One can create design file and use same context variables as other components uses on a lighting page and use the variables to send back to apex to get data related to that context ".</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">This also answers my own question on stackexchange </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><a href="http://salesforce.stackexchange.com/questions/105627/napili-template-standard-search-event">http://salesforce.stackexchange.com/questions/105627/napili-template-standard-search-event</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">I hope this is a framework for many upcoming appexchange ISV apps and also many communities .Please share this post in case you liked it .</span></div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com1tag:blogger.com,1999:blog-9199434648296876494.post-3079855802852676112016-01-18T22:19:00.000-05:002016-01-19T13:53:33.850-05:00Lightning components - Where all can I have thee...<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">With Salesforce investing lot on lightning components and I am sure lot of devs in salesforce world have started working with lightning components .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">I have also started working on lightning components and below is some cool list on where all currently salesforce allows these components and a small snippet for each showing the interface that lightning component must implement .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Exciting ...Exciting ...Lets start...</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<h1 class="helpHead1" style="background-color: white; color: #01344e; font-family: ProximaNovaRegular; font-size: 26.25px; line-height: 34.5px; margin: 0px 0px 10px; text-rendering: optimizeLegibility;">
<ul style="text-align: left;">
<li><span style="font-family: "proximanovalight"; font-size: 28px; line-height: 30px;">Add Lightning Components to Salesforce1</span></li>
</ul>
</h1>
<br />
<div>
<script src="https://gist.github.com/msrivastav13/01a67840b71368f291a7.js"></script>
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; font-size: 15px; line-height: 17px;"> The appHostable interface makes the component available as a custom tab.</span></span><br />
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; font-size: 15px; line-height: 17px;"><br /></span></span>
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white;"><span style="font-size: 15px; line-height: 17px;">All that one has to do is to create a lightning custom tab from salesforce Tabs and add to SF1 Navigation's .</span></span></span><br />
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; font-size: 15px; line-height: 17px;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-eHEjzMhmvqs/VpxSKpCC4vI/AAAAAAAAB8g/ftPofqc3Urc/s1600/Capturesl1.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="195" src="http://1.bp.blogspot.com/-eHEjzMhmvqs/VpxSKpCC4vI/AAAAAAAAB8g/ftPofqc3Urc/s400/Capturesl1.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-2kqXvWcuGVY/VpxSQ51PNqI/AAAAAAAAB8o/ZvgF1IQVxzo/s1600/Capturesl2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="http://3.bp.blogspot.com/-2kqXvWcuGVY/VpxSQ51PNqI/AAAAAAAAB8o/ZvgF1IQVxzo/s400/Capturesl2.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h1 class="helpHead1" style="background-color: white; color: #01344e; font-family: ProximaNovaRegular; font-size: 26.25px; line-height: 34.5px; margin: 0px 0px 10px; text-rendering: optimizeLegibility;">
<ul style="text-align: left;">
<li><span style="font-family: "georgia" , "times new roman" , serif; font-size: 28px; line-height: 30px;">Add Lightning Components to Lightning Experience</span></li>
</ul>
</h1>
<script src="https://gist.github.com/msrivastav13/01a67840b71368f291a7.js"></script>
<br />
<div>
The interface implemented remains as <span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif; font-size: 15px; line-height: 17px;">appHostable</span><span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif; font-size: 15px; line-height: 17px;"> .The key here is how we can add this tab to new App launcher </span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Pg52esmyKyk/Vp2coqjrnPI/AAAAAAAAB9I/HiIkuQRNUKQ/s1600/Capturesl3.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="553" src="http://4.bp.blogspot.com/-Pg52esmyKyk/Vp2coqjrnPI/AAAAAAAAB9I/HiIkuQRNUKQ/s640/Capturesl3.PNG" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: "georgia" , "times new roman" , serif; font-size: 15px; line-height: 17px;"><br /></span></div>
<div>
<span class="ph" style="font-family: "proximanovalight"; font-size: 28px; line-height: 30px; word-wrap: break-word;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-K3MSo4IrTBU/Vp2cx6bVEdI/AAAAAAAAB9Q/UR9W0EHjGss/s1600/Capturesl4.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="140" src="http://1.bp.blogspot.com/-K3MSo4IrTBU/Vp2cx6bVEdI/AAAAAAAAB9Q/UR9W0EHjGss/s640/Capturesl4.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="color: #333333; font-family: "georgia" , "times new roman" , serif;"><span style="background-color: white; font-size: 15px; line-height: 17px;"></span></span><br />
<h1 class="helpHead1" style="background-color: white; color: #01344e; margin: 0px 0px 10px; text-rendering: optimizeLegibility;">
<ul style="font-family: ProximaNovaRegular; font-size: 26.25px; line-height: 34.5px; text-align: left;">
<li><span style="font-family: "proximanovalight"; font-size: 28px; line-height: 30px;">Configure Components for Communities</span></li>
</ul>
<script src="https://gist.github.com/msrivastav13/f3c2c8f37e753b6766b6.js"></script>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-3DA5gIBDcZY/Vp2ebVMA7mI/AAAAAAAAB9c/TUrGLsAN4G4/s1600/Capturesl6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="http://4.bp.blogspot.com/-3DA5gIBDcZY/Vp2ebVMA7mI/AAAAAAAAB9c/TUrGLsAN4G4/s400/Capturesl6.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
</h1>
<h1 class="helpHead1" style="background-color: white; color: #01344e; margin: 0px 0px 10px; text-rendering: optimizeLegibility;">
<ul style="font-family: ProximaNovaRegular; font-size: 26.25px; line-height: 34.5px; text-align: left;">
<li><span style="font-family: "proximanovalight"; font-size: 28px; line-height: 30px;">Configure Components for Lightning App Builder</span></li>
</ul>
<script src="https://gist.github.com/msrivastav13/acedf93560267a7fd316.js"></script>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://res.cloudinary.com/hy4kyit2a/image/upload/v1433999443/doc/trailhead/help/images/lightning_app_builder_ui.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="347" src="https://res.cloudinary.com/hy4kyit2a/image/upload/v1433999443/doc/trailhead/help/images/lightning_app_builder_ui.png" width="640" /></a></div>
<span style="font-family: "proximanovalight";"><span style="font-size: 28px; line-height: 30px;"><br /></span></span></div>
</h1>
<h1 class="helpHead1" style="background-color: white; color: #01344e; margin: 0px 0px 10px; text-rendering: optimizeLegibility;">
<div>
<span style="font-family: "proximanovalight";"><span style="font-size: 28px; line-height: 30px;"></span></span></div>
</h1>
<h1 class="helpHead1" style="background-color: white; margin: 0px 0px 10px;">
<ul style="color: #01344e; font-family: proximanovaregular; font-size: 26.25px; line-height: 34.5px; text-align: left;">
<li><span style="font-family: "proximanovalight"; font-size: 28px; line-height: 30px;">Configure Components for Lightning Experience Record Home Pages (PILOT)</span></li>
</ul>
</h1>
</div>
</div>
<script src="https://gist.github.com/msrivastav13/67f69c8c15ff68af0ab3.js"></script><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-zY_9C678iOs/Vp2plJ2JYrI/AAAAAAAAB90/jTj73FRcLkY/s1600/Capturesl5.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-zY_9C678iOs/Vp2plJ2JYrI/AAAAAAAAB90/jTj73FRcLkY/s640/Capturesl5.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">A good example can be one demonstrated by <a href="https://balkishankachawa.wordpress.com/2015/12/09/who-viewed-record-last-lightning-component/">BalaKishan</a>.Please read his articles on lightning .Some great insights into it .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The key here is you have an attribute recordId and sObjectName populated automatically with correctId and API name</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<br />
<div class="line number4 index3 alt1" style="background: none white; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #666666; direction: ltr; float: none; font-size: 14px; height: auto; left: auto; line-height: 15.4px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
<code class="plain plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><span style="font-family: "georgia" , "times new roman" , serif;"><aura:attribute name="sObjectName" type="String"></aura:attribute></span></code></div>
<div class="line number5 index4 alt2" style="background: none white; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #666666; direction: ltr; float: none; font-size: 14px; height: auto; left: auto; line-height: 15.4px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
<span style="font-family: "georgia" , "times new roman" , serif;"><code class="plain spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="plain plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><!-- Atrribute Defination for Record Id --></code></span></div>
<div class="line number6 index5 alt1" style="background: none white; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #666666; direction: ltr; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
<div style="font-size: 14px; line-height: 15.4px;">
<span style="font-family: "georgia" , "times new roman" , serif;"><code class="plain spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="plain plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><aura:attribute name="recordId" type="String"></aura:attribute></code></span></div>
<h1 class="helpHead1" style="color: #01344e; margin: 0px 0px 10px; text-rendering: optimizeLegibility; white-space: normal;">
<ul style="font-family: ProximaNovaRegular; font-size: 26.25px; line-height: 34.5px; text-align: left;">
<li><span style="font-family: "proximanovalight"; font-size: 28px; line-height: 30px;">Add Lightning Components to Visualforce Pages</span></li>
</ul>
<script src="https://gist.github.com/msrivastav13/d14e75ecd1983d68f0c5.js"></script>
<div style="text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif; font-size: small;"><span style="font-weight: normal; line-height: 30px;">This is coolest feature that's been added lately .To add a lightning component to the VF you first define an aura:application that has aura:dependency and extends ltng:out .</span></span></div>
<div style="text-align: left;">
<br /></div>
</h1>
</div>
The sample component code
<script src="https://gist.github.com/msrivastav13/2af86f0442d20bc2dd5d.js"></script>
The VF code will look like below
<script src="https://gist.github.com/msrivastav13/3b5b8ce101c2e0716f18.js"></script>
<br />
<div class="line number6 index5 alt1" style="background: none white; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #666666; direction: ltr; float: none; font-size: 14px; height: auto; left: auto; line-height: 15.4px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
<code class="plain plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 15.4px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<span style="font-family: "georgia" , "times new roman" , serif;">I hope you enjoyed this little article :)</span></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 14px; height: auto !important; left: auto !important; line-height: 15.4px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<br /></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0tag:blogger.com,1999:blog-9199434648296876494.post-87663263459583278062016-01-10T14:06:00.001-05:002016-01-10T14:06:18.625-05:00Lightning Components Tokens<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">One of the coolest addition to <a href="https://developer.salesforce.com/lightning/platform-features" target="_blank">lightning components</a> in Spring 16 release has been <b><a href="http://docs.releasenotes.salesforce.com/en-us/spring16/release-notes/rn_lightning_design_tokens.htm" target="_blank">Lightning components Tokens</a></b> .This feature is in developer preview mode and I already see use case for this feature .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.</span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">In this blogpost we will discover how to create these design tokens and how to use it inside the lightning components .I am using spring 16 pre-release org to demonstrate .This feature will be available only after your sandboxes are upgraded to spring 16 release .</span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Developer console is quickest method to edit and create lightning resources .In developer console you will see lightning tokens </span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-9XQXD6Mr6d4/VpKluP_wV1I/AAAAAAAAB68/jjhaVPDe51Q/s1600/sld.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="189" src="http://2.bp.blogspot.com/-9XQXD6Mr6d4/VpKluP_wV1I/AAAAAAAAB68/jjhaVPDe51Q/s320/sld.PNG" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">To create a design token simply click on the lightning Tokens</span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><span class="ph menucascade" style="background-color: white; box-sizing: border-box; color: #3c3d3e; font-size: 14px; line-height: 20px;"><strong class="ph uicontrol" style="box-sizing: border-box;">File</strong> | <strong class="ph uicontrol" style="box-sizing: border-box;">New</strong> | <strong class="ph uicontrol" style="box-sizing: border-box;">Lightning Tokens</strong></span><span style="background-color: white; color: #3c3d3e; font-size: 14px; line-height: 20px;">.</span></span></div>
<div style="text-align: left;">
<b><i><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></i></b></div>
<div style="text-align: left;">
<b><i><span style="font-family: Georgia, Times New Roman, serif;">One important thing thats mandatory is to name the lightning Tokens file as "defaultTokens" .This is very important the tokens defined within it are automatically accessible in all Lightning components.</span></i></b></div>
<div style="text-align: left;">
<b><i><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></i></b></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Before we actually start creating lightning Tokens file one thing to note is Salesforce exposes a set of “base” tokens that we can access in our component style resources apart from custom tokens we create .To do this we will also extend our lightning component tokens from Base tokens .</span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Here is a sample lightning component tokens file </span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><script src="https://gist.github.com/msrivastav13/b27127eb9b1448abb4e2.js"></script></span></div>
<span style="font-family: Georgia, Times New Roman, serif;">Once we have created the file named "defaultTokens" these are directly available in any components in our namespace using small function token() .One just needs to use these in CSS resource of a component bundles.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Here is a sample example component showing how to use design tokens in CSS resource file .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/818972e3ea91a50782f4.js"></script><span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">It almost feels like custom labels to me but this is meant for use in the CSS design variables .It makes it easy to keep all design variables in a single resource and any change or update later one can avoid duplication of code and update from one single file .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">I am eagerly waiting to see updated lightning components developer guide where salesforce will expose some of the tokens used in the SLDS .</span><br />
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Feel free to spread the word of this upcoming feature but note that salesforce safe harbour applies .</span></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0tag:blogger.com,1999:blog-9199434648296876494.post-42492891367900771712015-12-24T10:11:00.002-05:002015-12-24T10:11:52.333-05:00Apex Testing goodness in spring 16<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/salesforce_release_notes.htm" target="_blank">Spring 16 release notes</a> has been great read .If you have not read ,find some time and do a quick scan to discover some really cool features .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
Apex Testing enhancement coming in spring 16 caught my attention and this blog post covers them in detail .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<b><a href="https://developer.salesforce.com/docs/atlas.en-us.200.0.apexcode.meta/apexcode/apex_methods_system_test.htm%23apex_System_Test_setCreatedDate" target="_blank">1)Ability to set createdDate value for test data before Test.startTest()</a></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
The below test class demonstrates this new feature </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<script src="https://gist.github.com/msrivastav13/7e100f8ed2607d4ab71a.js"></script></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /><b><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_test_suites" target="_blank">2)Test Suite</a></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><b></b>Test suites provide ability to run group of test classes together .On developer console you will find that you have ability to create a New Suite and use New Suite Run to run multiple suites or a single suite .Test Suites functionality is also available through Tooling API .I wont be surprised if this feature is added in some of IDE like <a href="http://mavensmate.com/" target="_blank">Mavensmate</a> or <a href="https://welkinsuite.com/" target="_blank">Welkins Suite</a> </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-v3AsD2xrvVc/Vnv_bXw-_DI/AAAAAAAAB5A/DiDrQI58LHM/s1600/Capture12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="283" src="http://4.bp.blogspot.com/-v3AsD2xrvVc/Vnv_bXw-_DI/AAAAAAAAB5A/DiDrQI58LHM/s320/Capture12.PNG" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-N9XW3qySDaM/VnwAX-31_5I/AAAAAAAAB5M/3vlalB_HGKg/s1600/Capture13.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="148" src="http://3.bp.blogspot.com/-N9XW3qySDaM/VnwAX-31_5I/AAAAAAAAB5M/3vlalB_HGKg/s320/Capture13.PNG" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span><span style="font-family: Georgia, Times New Roman, serif;">The Suite Manager helps to add or remove Test classes to existing suites or form a new suite or delete existing test suites.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><b><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_maxfailedtests" target="_blank">3)Stop a Test Run That’s Failing Miserably</a></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">You can now configure test runs to stop executing new tests after a given number of tests fail. You no longer need to waste your time waiting for the results of a run that you’re going to rerun after fixing issues in your org. You can set how many tests can fail in test runs that you execute both in the Developer Console and using the Tooling API.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">The Developer Console’s test run configuration panes have a new Settings button. </span><br />
<span style="font-family: Georgia, Times New Roman, serif;">To specify how many tests can fail before a test run or test suite run is canceled, click Settings, enter a value for Number of failures allowed, and then click OK. This value applies for all test runs that you execute, until you close the Developer Console or set a new value.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">I don't see this yet in spring 16 preview org and i assume it will be delivered .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<b><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits" target="_blank"><span style="font-family: Georgia, Times New Roman, serif;">4)Call Test.startTest() to Reliably Reset Limits in Apex Tests</span></a></b><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<b><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_mixed_dml" target="_blank"><span style="font-family: Georgia, Times New Roman, serif;">5)Use @future to Avoid the Dreaded MIXED_DML_OPERATION Error in Apex Tests</span></a></b><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">To avoid mixed DML we used future method to separate transactions and this caused failures in test class .There are number of workarounds available </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">1)We wrapped the code in future method with system.RunAs </span><br />
<span style="font-family: Georgia, Times New Roman, serif;">2)Also we enclosed the code block that makes the future method call within Test.startTest and Test.stopTest statements.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">check below link to know the workaround used before this release</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<a href="https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_dml_non_mix_sobjects_test_methods.htm"><span style="font-family: Georgia, Times New Roman, serif;"><b>https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_dml_non_mix_sobjects_test_methods.htm</b></span></a><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">All these workarounds no more needed and test class now does not throw mixed DML</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Check the example documented for more details</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><b><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits" target="_blank">https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits </a></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><b><a href="https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_continuation_callout_soap.htm" target="_blank">6)Test support for asynchronous WSDL based callouts</a></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">There is a neat example on how to approach test case for asynchronous WSDL callout in apex guide </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><b><a href="https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits">https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits</a></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Overall there has been great improvement in Testing framework of the apex .Test classes are very important for all apex code on platform .This needs to be seriously taken and great to see SFDC doing its best to enhance testing capabilities .</span><br />
<br />
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com1tag:blogger.com,1999:blog-9199434648296876494.post-14137148740920145782015-12-18T01:37:00.001-05:002015-12-18T01:45:51.894-05:00Trailhead Awesomeness Continues...<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">Last night I completed new modules and new project on <b><a href="https://developer.salesforce.com/trailhead" target="_blank">Trailhead</a></b> and I must admit Trailhead continues to impress me .Its been one of the best online training resource we have to get trained on force.com platform .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets talk about what will you learn once you complete these new modules and why it is worth to spend time on these</span><br />
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b>
<b><span style="font-family: "georgia" , "times new roman" , serif;">Boost your Apex Integration Skill set</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_apex_integration.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_apex_integration.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Apex Integration Services</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif; margin-left: 1em; margin-right: 1em;"></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">One of the key challenge for force.com developers who are new to the platform is they lack knowledge around art of possibility around Integration of force.cm platform with external system using apex services .One of the main cause has been lack of easy step to step guide so that they can follow and learn these techniques .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">The new module <a href="https://developer.salesforce.com/trailhead/module/apex_integration_services" target="_blank">Apex Integration Services</a> is a great step forward .I was surprised how challenging these exercises are to crack and it makes sure you understand the concepts well .I strongly recommend cracking this module to gain expertise around integration via apex .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Take your ability to debug and write formulae in force.com to next level</span></b></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="320" src="https://developer.salesforce.com/resource/images/trailhead/trails/trailhead_trail_admin_advanced.png" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Advanced Admin Trail</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/trails/trailhead_trail_admin_advanced.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://developer.salesforce.com/trailhead/module/advanced_formulas" target="_blank">Advanced Formulas</a> module is amazing and worth cracking it .It took me an hour being advanced and experienced dev so if you are new this may take more time .You will write some cool validations rules and some complex formulas .After this module i am sure you will be fearless when it comes to writing or debugging some complex formulas .Also note that this is part of new Trail Advanced Admin .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Continue your lightning experience adventure with new modules <a href="https://developer.salesforce.com/trailhead/module/lex_implementation_chatter" target="_blank">LEX chatter basics</a> and <a href="https://developer.salesforce.com/trailhead/module/lex_implementation_data_management" target="_blank">LEX data management</a></span></b></div>
<h3>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="200" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lightning_data_management.png" style="margin-left: auto; margin-right: auto;" width="200" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">LEX Data Management</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lightning_data_management.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="200" src="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lightning_chatter.png" style="margin-left: auto; margin-right: auto;" width="200" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">LEX Chatter Basics</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/modules/trailhead_module_lightning_chatter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"></span></a></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;">Lightning experience is the future of salesforce .With new modules you will continue to understand how to leverage chatter in lightning experience and also understand how to import and export data via dataloader and import wizard provided in the set up menu .</span></div>
<div>
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<h3 style="text-align: left;">
<b><span style="font-family: "georgia" , "times new roman" , serif;">Build an </span><a href="https://developer.salesforce.com/trailhead/project/workshop-battle-station" style="font-family: Georgia, 'Times New Roman', serif;" target="_blank">awesome app</a><span style="font-family: "georgia" , "times new roman" , serif;"> learning platform basics and also give yourself a chance to win </span><a href="https://developer.salesforce.com/blogs/developer-relations/2015/12/stay-target-win-prizes-latest-trailhead-badge.html" style="font-family: Georgia, 'Times New Roman', serif;" target="_blank">Astronomical Prizes</a></b></h3>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="https://developer.salesforce.com/resource/images/trailhead/badges/projects/trailhead_project_battle_station.png" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Battle Station App</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/resource/images/trailhead/badges/projects/trailhead_project_battle_station.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: "georgia" , "times new roman" , serif;"></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">This module helps you to learn platform basics and at the end you give yourself a chance to win some cool prizes .So hurry and get this done before 31st dec .The project link is below ,click and get started.The project will teach you how to create apps ,build objects and fields on force.com platform ,write business logic using process builder and workflows ,how to create reports and dashboards and how to use SF1 mobile app to expose the functionality for mobile devices.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://developer.salesforce.com/trailhead/project/workshop-battle-station" target="_blank"><b>https://developer.salesforce.com/trailhead/project/workshop-battle-station</b></a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Apart from these <a href="https://developer.salesforce.com/trailhead/module/alm_deployment" target="_blank"> Application Lifecycle Management module </a> is being rewritten to provide more awesome content .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;">Enjoy <b><a href="https://developer.salesforce.com/trailhead" target="_blank">Trailhead </a></b>and dont forget to post your selfie with badges completed on twitter .Also now you can add those badges to your linkedIn profile .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://pbs.twimg.com/media/CWdF5h2VEAA03cc.png:large" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="401" src="https://pbs.twimg.com/media/CWdF5h2VEAA03cc.png:large" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Trailhead Selfie</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com1tag:blogger.com,1999:blog-9199434648296876494.post-47306370292169540652015-12-06T14:56:00.000-05:002015-12-06T14:56:01.231-05:00IOS and Visualforce in Salesforce 1 app Hicups<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://developer.salesforce.com/lightning" target="_blank">Lighting</a> is out and looks like its the future of customization of Salesforce 1 mobile pages .Speaking of present still we have large number of apps having visualforce page for the Salesforce 1 app build using either angular(or other frameworks ) or plain old visualforce styled to responsive design .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">This blogpost is sharing some insights into common issues that I encountered with Visualforce inside SF1 container when I was testing the functionality with iPhone or iPad.</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lets list all of them one by one and list the work around for issues as these have no proper fix and are logged as issues by SFDC</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b>
<b><span style="font-family: "georgia" , "times new roman" , serif;">1)Key freezing issue with HTML input tags</span></b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><b><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></b>
<span style="font-family: "georgia" , "times new roman" , serif;">This is one of the primary issues that's really show stopper .If you have a visualforce and you use apex:input or normal HTML input and double tap the cursor on the text field you will notice that your keys are freezed and text you enter dont appear on the input box .</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">This looks to be serious issue with new version of IOS and Salesforce 1 app .Even you are using <a href="https://twitter.github.io/typeahead.js/examples/" target="_blank">twitter typeahead</a> for autocomplete or lookups this issue can be easily observed and keys will freeze once you make selection .</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">The workaround for this is to include a small script at the bottom of the page that resolves this .Please note this is a workaround until this is fixed officially</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><script src="https://gist.github.com/msrivastav13/532097e8d27fe8ba774c.js"></script></span></span><br />
<b><span style="font-family: Georgia, Times New Roman, serif;">2)Not able to scroll the iframe embedded in Visualforce inside SF1 container for iPad or iPhone </span></b><br />
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b>
This is another common bug and has something to do with IOS webkit inside SF1 .The workaround is below small snippet that adds scrolling behavior needed</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<script src="https://gist.github.com/msrivastav13/c84d835d13574d8403f0.js"></script><span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">There are also certain things that we need to note about <a href="https://developer.salesforce.com/docs/atlas.en-us.salesforce1.meta/salesforce1/vf_dev_best_practices_navigation.htm" target="_blank">navigation pattern</a> we follow in SF1 specific apps</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><i>1)When navigating to the external world the right function to use is as below</i></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><i><br /></i></span>
<span style="font-family: Georgia, Times New Roman, serif;"><i><span style="background-color: white; color: #333333; font-size: 13.5px; line-height: 23px;">navigateToURL(</span><span class="keyword parmname" style="background-color: white; border-radius: 3px; color: #00008c; font-size: 13.5px; line-height: 17px; word-wrap: break-word;">url</span><span style="background-color: white; color: #333333; font-size: 13.5px; line-height: 23px;">[, </span><span class="keyword parmname" style="background-color: white; border-radius: 3px; color: #00008c; font-size: 13.5px; line-height: 17px; word-wrap: break-word;">isredirect</span><span style="background-color: white; color: #333333; font-size: 13.5px; line-height: 23px;">])</span></i></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; color: #333333; font-size: 13.5px; line-height: 23px;"><i><br /></i></span></span>
<span style="font-family: Georgia, Times New Roman, serif;"><i>If you want SF1 container not to remember the history set redirect parameter to the true state.</i></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><i>2)Use back function to navigate to the back and use redirect parameter as true if you want your page to refresh</i></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><i><br /></i></span>
<span style="font-family: Georgia, Times New Roman, serif;"><i><span style="background-color: white; color: #333333; font-size: 13.5px; line-height: 23px;">back([</span><span class="keyword parmname" style="background-color: white; border-radius: 3px; color: #00008c; font-size: 13.5px; line-height: 17px; word-wrap: break-word;">refresh</span><span style="background-color: white; color: #333333; font-size: 13.5px; line-height: 23px;">])</span></i></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Using frameworks to develop SF1 apps can increase the speed of app build .Also for complex SF1 visualforce page if you have too many actions and you are packaging for as an appexchange app its worth to write some automation testing using selenium or using protractor whatever you feel comfortable just to not scratch your head if something breaks later due to SFDC releases or due to some code change during upgrade.</span><br />
<br />
<span style="font-family: Georgia, Times New Roman, serif;">I hope you enjoyed this post and will help you troubleshoot issues with SF1 app</span><br />
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com10tag:blogger.com,1999:blog-9199434648296876494.post-82137474240477909812015-11-05T18:27:00.004-05:002015-11-05T18:27:59.102-05:00Using Lighting Out with Visualforce<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "georgia" , "times new roman" , serif;">Lightning out is awesome feature and it is correct way of integrating mashups .With lightning out one can easily take lightning components outside salesforce .Some of the examples of system that can consume this includes Heruko , SAP ,Sharepoint and so on .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">For external system mashup you will need to first establish connection with SFDC using connected apps .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">There is an excellent session on this <a href="https://www.youtube.com/watch?v=Vi_5gZc5EFE" target="_blank">topic</a> .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"> I have found multiple blogs demonstrating the concept where the lightning component attribute is set from the data inside visualforce .Some of them are as below</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="https://balkishankachawa.wordpress.com/2015/10/31/lightning-component-javascript-remoting-and-visualforce-page/" target="_blank">Balkishankachawa.wordpress.com/2015/10/31/lightning-component-javascript-remoting-and-visualforce-page/</a></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><a href="http://peterknolle.com/lightning-components-in-visualforce/">http://peterknolle.com/lightning-components-in-visualforce/</a></span><br />
<br />
<span style="font-family: "georgia" , "times new roman" , serif;">In this blog we will see how to get the component values out of lightning into our Javascript variable so that we can continue with more fun of mixing Visualforce and lightning components .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>USE CASE :::</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">My entire Visualforce page used no apex:form and it used pure HTML ,SLDS CSS and Javascript remoting for actions .Now comes the big change in requirement ,need Rich text input field .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">I googled to figure if HTML-5 has rich text fields or are there any native solutions without adding the apex:form element and apex:textarea .Introduction of apex:form implies lot of viewstate and makes page slow .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Lightning components interestingly provide "ui:inputRichText</span><span style="font-family: "georgia" , "times new roman" , serif;">"</span><span style="font-family: "georgia" , "times new roman" , serif;"> which is rich text on the webform .Exciting !!! ..Now comes the challenge of integrating the lightning component into the visualforce and then grabing the set text from the lighting component back into visualforce .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">Using lightning out we can integrate a component into visualforce with few lines of javascript .</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;">We will also see how to use the callback function provided to grab the component attribute value back into our visualforce page </span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>
<span style="font-family: "georgia" , "times new roman" , serif;"><b>COMPONENT CODE::</b></span><br />
<span style="font-family: "georgia" , "times new roman" , serif;"><b><br /></b></span><span style="font-family: "georgia" , "times new roman" , serif;"><b><script src="https://gist.github.com/msrivastav13/2af86f0442d20bc2dd5d.js"></script></b></span>
If you are familiar with lightning components its 101 of that .A simple component being embedded .<br />
<br />
<b>LIGHTNING DEPENDENT APP:</b><br />
<b><br /></b>
<b><script src="https://gist.github.com/msrivastav13/d14e75ecd1983d68f0c5.js"></script></b>This is similar to declaring dependency just like how we write import statements in java or node.<br />
<br />
<b>VISUALFORCE CODE::</b><br />
<b><br /></b>
<b><script src="https://gist.github.com/msrivastav13/3b5b8ce101c2e0716f18.js"></script></b><i>The most important part of visualforce code here is way we have declared a javascript variable and pulled the Component into global variable to access it outside the component and use right away in our visualforce</i><br />
<i><b><br /></b></i>
<i><b> var richtext;</b></i><br />
<i><b> $Lightning.use("c:RichtextApp", function() {</b></i><br />
<i><b> $Lightning.createComponent("c:Richtextcmp", {},</b></i><br />
<i><b> "richTextEditor",</b></i><br />
<i><b> function(cmp) {</b></i><br />
<i><b> // do some stuff</b></i><br />
<i><b> richtext = cmp;//Very important</b></i><br />
<i><b> });</b></i><br />
<b><i></i></b><br />
<i><b> });</b></i><br />
<br />
The final screens are below<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC0Pp4jx6QYbVBIPLUjFTUFx08QtB2ju9AZICcHKlqy2LI37zRvhERDGhgYZJmwJcXzMa5Q_FmnntZRzTSVfjDBRBSfImri0T11Uavzsx8kUhnN5qfpbipiuSGka5RoHvmUCQPUy-37xfh/s1600/Capture1.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC0Pp4jx6QYbVBIPLUjFTUFx08QtB2ju9AZICcHKlqy2LI37zRvhERDGhgYZJmwJcXzMa5Q_FmnntZRzTSVfjDBRBSfImri0T11Uavzsx8kUhnN5qfpbipiuSGka5RoHvmUCQPUy-37xfh/s640/Capture1.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-MwWopQ2vMDs/Vjvk_CojNJI/AAAAAAAABy8/PMdQBpKW7QU/s1600/Capture2.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="174" src="http://1.bp.blogspot.com/-MwWopQ2vMDs/Vjvk_CojNJI/AAAAAAAABy8/PMdQBpKW7QU/s640/Capture2.PNG" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Georgia, Times New Roman, serif;">The console.log clearly prints the what ever is typed in the editor showing how easy it is to get values out of the lightning component.</span><br />
<br /></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com1tag:blogger.com,1999:blog-9199434648296876494.post-77569546405210668662015-11-01T22:39:00.004-05:002015-11-01T22:39:49.734-05:00Using Jquery with SLDS for validation and Error Display<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">Recently I have been playing around with <a href="https://www.lightningdesignsystem.com/" target="_blank">SLDS </a> design system and for sure this has better component set for building mordern applications with excellent look and feel for Mobile or desktop .</span><br />
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">One of the key challenges using this library in visualforce (Not in lightning components) is there is no javascript support for CSS unlike <a href="http://getbootstrap.com/" target="_blank">bootstrap </a> and hence it makes really difficult .This is initial stage and I am sure as more developers dig into this ,they will come up with Javascript for various components .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">One reason why SFDC would have left this as an exercise to community is since there are wide variety of frameworks now and each Javascript framework is evolving on its own .Angular is moving towards <a href="https://angular.io/docs/js/latest/quickstart.html" target="_blank">Angular 2</a> and React is still in its intial phases (Although this framework is widely adapted now and has its own advantages and flexibility).</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Lightning components on the other hand is also fairly new but event driven patterns makes it easier to communicate with server .Lightning components will definitely work well with SLDS and there are already some attempts made to build some components .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Check the below project in Trailhead and its a good starting point to get started with using SLDS in lightning components</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://developer.salesforce.com/trailhead/project/slds-lightning-components-workshop">https://developer.salesforce.com/trailhead/project/slds-lightning-components-workshop</a></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">I tried playing with SLDS with jquery and feel using simple jquery with SLDS can be really cool architecture to build simple applications .Again i dont say it may scale well and you will see for larger applications it will be better to go with frameworks .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Aim of this blogpost is to demonstrate a simple plugin that i have built that can handle client side validations and also you can display error or success in SLDS style .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">The source code for the plugin is available at below gist </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://gist.github.com/msrivastav13/dd45242d3484c6b76f8a">https://gist.github.com/msrivastav13/dd45242d3484c6b76f8a</a></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Lets walk through a simple use case on how to use this .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">For demonstration purpose we will building a simple form with SLDS design system and a small apex class that calls a Javascript remoting function to insert Account.</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">We will need three libraries installed to see a working demo</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;"><a href="https://www.lightningdesignsystem.com/" target="_blank">Salesforce SLDS CSS library latest version</a></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;"><a href="https://jquery.com/" target="_blank">Jquery library </a></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;"><a href="https://gist.github.com/msrivastav13/dd45242d3484c6b76f8a" target="_blank">SLDS Validator plugin from my gist </a></span></li>
</ol>
<div>
The page code for ease is below<br />
<br />
<script src="https://gist.github.com/msrivastav13/9ea7a118e90916996dc1.js"></script></div>
</div>
The apex code for ease of our eyes is below<br />
<br />
<script src="https://gist.github.com/msrivastav13/15c660b294240c22bec7.js"></script><b>Plugin set up Instructions</b><br />
<b><br /></b>
All the visualforce coder needs to handle in HTML of input tag is to add two extra attributes declaratively<br />
<br />
<ol style="text-align: left;">
<li>data-required (Make this to true if you want the field to be required)</li>
<li>data-fieldName (Field label that will be displayed as error )</li>
</ol>
<div>
In Javascript remoting you will just wrap your remoting call with below</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><b>if (!validatorSLDSplugin.validate()) {</b></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><b><br /></b></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><b>}</b></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><b><br /></b></span></div>
<div>
<br /></div>
<div>
<span style="color: #333333; font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><b>Sample screenshot of how this looks</b></span></span></div>
<div>
<span style="color: #333333; font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><b><br /></b></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-_6d_o07Jmr4/VjbSLAIWRsI/AAAAAAAABxs/UhLCoVrFFkg/s1600/Capture1.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="145" src="http://3.bp.blogspot.com/-_6d_o07Jmr4/VjbSLAIWRsI/AAAAAAAABxs/UhLCoVrFFkg/s640/Capture1.PNG" width="640" /></a></div>
<div>
<span style="color: #333333; font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><b><br /></b></span></span></div>
<br />
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">To display success or error messages or any messages on the screen invoke the validator function display alert as below with message and message class .Note message class has to be from the SLDS library .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">From SLDS library the classes are as below</span><br />
<ul style="text-align: left;">
<li><span style="font-family: Georgia, 'Times New Roman', serif;">success--</span><span style="background-color: #eaffea; color: #333333; font-family: Georgia, 'Times New Roman', serif; font-size: 12px; line-height: 16.8px; white-space: pre;"><b>slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture</b></span></li>
<li><span style="font-family: Georgia, 'Times New Roman', serif;">failure --</span><b style="font-family: Georgia, 'Times New Roman', serif;">-<span style="background-color: #eaffea; color: #333333; font-size: 12px; line-height: 16.8px; white-space: pre;">slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture</span></b></li>
<li><span style="font-family: Georgia, 'Times New Roman', serif;">info ---</span><span style="background-color: #eaffea; color: #333333; font-family: Georgia, 'Times New Roman', serif; font-size: 12px; line-height: 16.8px; white-space: pre;"><b>slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture</b></span></li>
</ul>
A sample example of how to invoke the validator is as below for success message<br />
<br />
<table class="highlight tab-size js-file-line-container" data-tab-size="8" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; line-height: 18.2px; tab-size: 8;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"></tr>
<tr style="box-sizing: border-box;"><td class="blob-code blob-code-inner js-file-line" id="file-sldsvalidatordemo-page-LC55" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; white-space: pre; word-wrap: normal;"><span style="font-size: small;"><b>validatorSLDSplugin.displayalert('Record created with Id..'+result.Id
,'slds-notify slds-notify--alert
slds-theme--success slds-theme--alert-texture');
Sample screenshot of how this looks
</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: small;"><b><a href="http://1.bp.blogspot.com/-Bq3_ueK0_44/VjbSpJcVuRI/AAAAAAAABx0/bYKiNjw_Rxw/s1600/Capture21.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="140" src="http://1.bp.blogspot.com/-Bq3_ueK0_44/VjbSpJcVuRI/AAAAAAAABx0/bYKiNjw_Rxw/s640/Capture21.PNG" width="640" /></a></b></span></div>
<span style="font-size: small;"><b>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--ANzKQ8qdmw/VjbaTJoB-eI/AAAAAAAAByI/_Y64sLwmx7E/s1600/Captures.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="128" src="http://3.bp.blogspot.com/--ANzKQ8qdmw/VjbaTJoB-eI/AAAAAAAAByI/_Y64sLwmx7E/s640/Captures.PNG" width="640" /></a></div>
</b></span></td></tr>
<tr style="box-sizing: border-box;"><td class="blob-num js-line-number" data-line-number="56" id="file-sldsvalidatordemo-page-L56" style="-webkit-user-select: none; border-color: rgb(238, 238, 238); border-style: solid; border-width: 0px 1px 0px 0px; box-sizing: border-box; color: rgba(0, 0, 0, 0.298039); cursor: pointer; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 18px; min-width: 50px; padding: 0px 10px; text-align: right; vertical-align: top; white-space: nowrap; width: 50px;"></td></tr>
</tbody></table>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><b>Handling SVG images</b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">One of the pain points of the new SLDS has been how we handle SVG .I ran into an issue where using jquery append function did not work with SVG .To overcome this we have refresh the HTML section again .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">The refresh can be done as below in Jquery</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<b><span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;">j$(</span><span class="pl-s" style="background-color: white; box-sizing: border-box; color: #183691; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><span class="pl-pds" style="box-sizing: border-box;">"</span>#messagewrapper<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;">).html(j$(</span><span class="pl-s" style="background-color: white; box-sizing: border-box; color: #183691; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><span class="pl-pds" style="box-sizing: border-box;">"</span>#messagewrapper<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;">).html());</span></b><br />
<b><span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><br /></span></b>
<br />
<span style="font-family: Georgia, Times New Roman, serif;">I also think same solution can be applied to action:function when re rendering SVG tags .A jquery call needs to be made again with outputPanel surrounded and in oncomplete function refreshing the HTML using jquery .I have not tried this but would love to try and see .(If any of you got leisure time try this and let me know how this goes)</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Also observe the image variable that i have used in my page to pass the dynamic URL as a global window object to the plugin .</span><br />
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;"><span style="line-height: 16.8px; white-space: pre;"><b>var imageURL = "{!URLFOR($Resource.SLDS102, 'assets/icons/action-sprite/svg/symbols.svg#close')}";</b></span></span>
<span style="background-color: white; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.8px; white-space: pre;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">I hope you enjoyed this post .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">This is start and i guess it would be great if all SLDS components can be wrapped with jquery or probably angular directives or react components .Visualforce is amazing tool and for building simple mobile friendly pages ,using Javascript remoting with SLDS and VF would work well with rapid development time .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com3tag:blogger.com,1999:blog-9199434648296876494.post-42182020095605621562015-10-04T21:41:00.001-04:002015-10-04T21:41:59.262-04:00Setting up Dev tools for Salesforce Project that uses ReactJs library<div dir="ltr" style="text-align: left;" trbidi="on">
<b><span style="font-family: Georgia, Times New Roman, serif;">Problem Statement :</span></b><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
You are building a visualforce page which has React JS library and you want to split your React code into multiple files as per javascript best practices and maintain your React JS folder inside your mavensmate project .You need your tooling to help you with local development in offline as well you are in search of a convenient mechanism to handle pushing your changes to SFDC static resource with minimum effort . </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
The static resource once zipped in salesforce ,its hard to edit even for awesome tools like <a href="http://mavensmate.com/" target="_blank">mavensmate</a> .Mavensmate tool is a well known IDE and it comes with <a href="http://www.joe-ferraro.com/2012/12/mavensmate-resource-bundles/" target="_blank">resource bundle</a> for this process where one can create a bundle with JS ,CSS and image files and then convert these bundles to the static resource .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
This process will not work for the React JS files as React JSX needs to be transformed into JS files before the actual code is shipped to the Production .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
There are multiple ways to solve this tooling problem and in this post we will set up our tools for salesforce project using combination of <a href="http://gulpjs.com/" target="_blank">gulp</a> and <a href="http://mavensmate.com/" target="_blank">mavensmate</a></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<b>Prerequisite:</b></span><br />
<ol style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">You have node installed in your system</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">You understand gulp.js (Using gulp you can automate your workflow build for JavaScript Projects)</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">You are in process of learning React JS and understand the library</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">You are familiar with mavensmate IDE for apex and visualforce development</span></li>
</ol>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">In my last <a href="http://cloudyworlds.blogspot.com/2015/09/reactjs-and-salesforce-lightning-slds.html" target="_blank">article</a> we created a simple page with React and all code was inside the single visualforce page making it harder to maintain and debug .We will use the same Visualforce page and I will walk through the process of how we can be more structured and modular making life simpler for debugging and deploying and of course having fun by doing development locally .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">To get started you can clone the repo below and have gulpfile.js and package.json copied to your project folder and also you can create a sample folder structure for ReactJs as per my git project</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<script src="https://gist.github.com/msrivastav13/c507f042a971626e91f0.js"></script></div>
<span style="font-family: Georgia, Times New Roman, serif;">Observe the gulp file ,it has two major tasks</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
1)Build task</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<script src="https://gist.github.com/msrivastav13/d6ba512e0f9f693d34cc.js"></script><br />
This will create a separate folder dist/build and concatenate all JS react modules using <a href="http://browserify.org/" target="_blank">browserify</a>(Browserify will transform using JSX to JS files) .Also note in JSX files how we have used require and module.exports function .If you are familiar with <a href="https://nodejs.org/en/" target="_blank">node.js</a> this is common pattern to export module and configure dependencies .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
2)Zip task</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<script src="https://gist.github.com/msrivastav13/3c8e68e651764b796cb1.js"></script><br />
This task will zip our final JS files from build folder and place in our mavensmate static resource folder .Note its ideal to create Static resource on server (Salesforce)and sync to mavensmate so that you have meta xml .Else you will need to create your own meta xml for pushing from mavensmate.(Remember deployment to salesforce need meta xml for each component ).</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
You will need node now and once you have package.json and the gulpfile.js you can run install command to have all node modules and dependency configured on your local machine</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<b>npm install </b></span><br />
<ul style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;"><b>Keep your static resource file name and the file name in the gulp file path <script src="https://gist.github.com/msrivastav13/c1f0cd3eca7154dfcc63.js"></script></b></span></li>
</ul>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Observe the <span style="background-color: white; color: #333333; font-size: 12px; line-height: 16.8px; white-space: pre;"><b>RESOURCE_NAME</b> </span><span style="background-color: white; color: #333333; line-height: 16.8px; white-space: pre;">Parameter and it has same name as static resource and its key assumption here .</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; color: #333333; line-height: 16.8px; white-space: pre;"><br /></span>
<span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;">Following are the three process you will need to follow once you change code to sync to salesforce server</span></span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><br /></span></span>
<span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;">1)Run gulp build</span></span></span><br />
<span style="color: #333333; font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; line-height: 16.8px; white-space: pre;">2)Run gulp zip</span></span><br />
<span style="color: #333333; font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; line-height: 16.8px; white-space: pre;">3)Save mavensmate static resource file </span></span><br />
<span style="color: #333333; font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><br /></span></span>
<span style="color: #333333; font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; line-height: 16.8px; white-space: pre;">Note :You can set up gulp default and configure both to happen in one command but my personal preference is to go step by step .</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><br /></span></span>
<span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;">Notice that from previous sample our entire visualforce is reduced so much </span></span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"><br /></span></span>
<span style="color: #333333;"><span style="background-color: white; line-height: 16.8px; white-space: pre;"></span></span><script src="https://gist.github.com/msrivastav13/e996c03c00f11fa209be.js"></script></span><br />
<span style="font-family: Georgia, Times New Roman, serif;">To make more things clear lets watch it in action the flow of tooling workflow .You can check my <a href="https://github.com/msrivastav13/SalesforceReact" target="_blank">git repo</a> for entire work </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="background-color: white; font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/tquMlEy5vCs/0.jpg" src="https://www.youtube.com/embed/tquMlEy5vCs?feature=player_embedded" frameborder="0" allowfullscreen></iframe></span></div>
<h3>
<span style="font-family: Georgia, Times New Roman, serif; font-size: small;"><span style="font-weight: normal;">This is not the end of the world .You can further use <a href="https://jsforce.github.io/blog/posts/20140126-deploy-package-using-jsforce-and-gulpjs.html" target="_blank">jsforce</a> and automate further .Also you can set up gulp watch task to watch only for changes and run your process automatically and deploy to salesforce.</span></span></h3>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: small;"><span style="font-weight: normal;">Kindly note that this process or having gulp set up you can do more magical stuff and become efficient .</span></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: small;"><span style="font-weight: normal;"><br /></span></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: small;"><span style="font-weight: normal;">Lot to expore.Need to make some time and kick some ass :) .I hope you enjoyed this small blog and thanks for your time .</span></span></div>
<div>
<br /></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com17tag:blogger.com,1999:blog-9199434648296876494.post-73896428231655270202015-09-21T20:36:00.003-04:002015-10-03T21:55:03.037-04:00ReactJS and Salesforce Lightning SLDS 101<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://res.cloudinary.com/oyecode/image/upload/v1442780433/Reactjs%20With%20Salesforce.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" src="http://res.cloudinary.com/oyecode/image/upload/v1442780433/Reactjs%20With%20Salesforce.png" height="121" width="400" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Having worked on writing visualforce page with React using Salesforce Lighting Design System I would like to share some experience through this blog post.</span></div>
</div>
</div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Clearly ReactJs can cherry pick difference in the DOM structure and updates the only part of DOM that is part of component, you read this post to know little in detail about ReactJs on getting started and understaning basics.</span></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
</h3>
<h3 style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">
ReactJs with Remote Objects</span></h3>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Salesforce <code>Remote Objects</code> allows you query salesforce without glueing apex and purely writing UI intensive apps see <a href="http://www.oyecode.com/2014/02/how-to-use-salesforce-remote-objects-in.html" target="_blank">here</a>. I wrote code snippet that consume remote object and query salesforce, on top of it, he have imported <code><a href="http://www.lightningdesignsystem.com/" target="_blank">Lighting Design System</a> </code>to fabricate the UI.</span></div>
<h3 style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></h3>
<h3 style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Salesforce Lighting Design System (CSS from Salesforce)</span></h3>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Salesforce have opened stylesheets <a href="http://www.lightningdesignsystem.com/" target="_blank">now,</a> for the world to incorporate Salesforce user experience with new Lighting UI. Out of the many components available, I will be using datatable component and header components to carve the layout of this page.</span></div>
<h3 style="text-align: justify;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></h3>
<h3 style="text-align: justify;">
<span style="font-family: Georgia, 'Times New Roman', serif;">Single Page Application (SPA)</span></h3>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">To showcase, component driven functionality with React, I wrote single page, keeping concepts simply to absorb, to give a kick start and direction for consuming this framework in the universe of Salesforce.Below is visualforce page that consume React component, click below to open in new page</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><a class="embedly-card" href="http://samplereact-developer-edition.ap2.force.com/">Hello React</a>
<script async="" charset="UTF-8" src="//cdn.embedly.com/widgets/platform.js"></script>
</span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<h3 style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">
Code Walkthrough</span></h3>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">If you carefully notice, we reference all external javascript through CDN and some hosted on github, learn <a href="http://www.oyecode.com/2015/07/can-github-be-cdn-for-salesforce.html" target="_blank">how to use Github as CDN with Salesforce</a>.</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://i.imgur.com/icSoZta.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" src="http://i.imgur.com/icSoZta.png" height="98" width="640" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">The components are divided from top to bottom in two prime category of components nested</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">1. Account View : Parent component nesting child component</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">2. Account List : Child component polling Salesforce to list data rows</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">To visualize neatly you can see this tree structure shown below</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"> --Accountview</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"> ---</span><span style="background-color: white; color: #333333; line-height: 16.8px; white-space: pre;"><span style="font-family: Georgia, Times New Roman, serif;">AccountList</span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; line-height: 16.8px; white-space: pre;"><span style="font-family: Georgia, Times New Roman, serif;"> --Account 1</span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; line-height: 16.8px; white-space: pre;"><span style="font-family: Georgia, Times New Roman, serif;"> --Account 2</span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; line-height: 16.8px; white-space: pre;"><span style="font-family: Georgia, Times New Roman, serif;"> --Account 3</span></span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">As you can see three component are primary designed here, Account Component is component to draw header of the table (list) declared as below</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://i.imgur.com/lXOjteA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" src="http://i.imgur.com/lXOjteA.png" height="138" width="640" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Secondly, AccountView is nesting drawing the view of table and nesting list component that queries Salesforce in the back</span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://i.imgur.com/XIS46Hb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" src="http://i.imgur.com/XIS46Hb.png" height="420" width="640" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">AccountList binds data into Tabular view and generates table</span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://i.imgur.com/WqlEvPN.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" src="http://i.imgur.com/WqlEvPN.png" height="360" width="640" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Notice, the use of promises with Visualforce Remote Objects using code from in <a href="https://github.com/mattwelch/makeDeferredProvider">this repo</a> (check it out) and not a single line of html code is written on visualforce end besides skeleton of the page, all code is written in JSX compiled into Javascript, also note for converting React JSX to javascript in production release, you can do it through <code><a href="https://www.npmjs.com/package/react-tools">Node React Tool</a></code></span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;">Whole code snippet is embedded below is ready to be served out of the box (import all required resources from CDN)</span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<br />
<script src="https://gist.github.com/mailtoharshit/05221fd9152b5e2cdad8.js"></script></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com45tag:blogger.com,1999:blog-9199434648296876494.post-19354834649783486132015-09-02T23:47:00.000-04:002015-09-02T23:48:44.932-04:00Migrating to Lightning Experience with Trailhead <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">I have been fan of Trailhead since I used it for first time to learn on how to build lightning components .Trailhead makes learning fun and enjoyable .You get to learn at your own pace at your own time and at your convenience .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Many of you would have heard salesforce launching new User Experience which is seamless experience of your salesforce data on any device size ,right from your apple watch to your apple macbook pro or air .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Migration is always not easy .Its cultural change .It will come with time and people will require some support and Training to get trained .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Trailhead is our friend that will guide us in right path as we transition from our aloha look and feel to this new exciting lightning experience .Whether you are Developer ,Architect ,Customer or Partner related to Salesforce ,Trailhead has content for everyone .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Lets Summarize the content that will make you feel confident and comfortable while you go through each of these new modules in the Trailhead</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b>Admin Trail</b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-UXUlpWY-Ezg/Vee7MPhfYbI/AAAAAAAABoY/9oZpPTXW1s8/s1600/t1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="313" src="http://2.bp.blogspot.com/-UXUlpWY-Ezg/Vee7MPhfYbI/AAAAAAAABoY/9oZpPTXW1s8/s320/t1.PNG" width="320" /></span></a></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">For Admins Migration to lightning experience means they need to be familiar with below</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<ol style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">How can they customize or change layouts ?</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">How can they configure objects and relationships?</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">How can they enable their users to this new experience ?</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">What should be the Roll out strategy while they migrate the users to new experience ?</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Where can they configure actions and what are the differences with respect to old aloha UI ?</span></li>
</ol>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Lot to answer.If an admin goes through all the modules present in above Trailhead I am sure you will get to the meat of the content .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b>Developer Trail</b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-eYVtM13iDjA/Vee87bc3_1I/AAAAAAAABok/6kx1X76x-bs/s1600/t2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="320" src="http://3.bp.blogspot.com/-eYVtM13iDjA/Vee87bc3_1I/AAAAAAAABok/6kx1X76x-bs/s320/t2.PNG" width="296" /></span></a></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b><br /></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">With new Lightning ,Developers will need to worry about following </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">1)What will break in their existing code and wont work with lightning ?</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">2)How can they make their Visualforce code work with lightning ?</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">3)What is Salesforce Lightning Design System ?</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">4)How can they detect via code how to differentiate between aloha environment and lightning environment ?</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">5)If you are an ISV ,what factors you have to consider when you build your visualforce pages ?</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">6)What changes app exchange packages will need to get the Lightning Certified Sash?</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">All the answers to this has been embedded inside the Developer Trail for Lightning experience .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b>Sales Rep Training</b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-iVytXUHtBsc/Vee-cR091TI/AAAAAAAABo4/o6mm50w5PQk/s1600/Capture6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="320" src="http://2.bp.blogspot.com/-iVytXUHtBsc/Vee-cR091TI/AAAAAAAABo4/o6mm50w5PQk/s320/Capture6.PNG" width="296" /></span></a></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b><br /></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Sales Rep Trail will enable your organization to train your sales reps </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Asking Sales Rep to go through this Trail will help them use the system effectively .Your sales rep will learn below in detail</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">How to work with leads and opportunities with new user experience </span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Various tools that will help them to track their performance and help them sell effectively</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">New reports and dashboards and chatter feeds .</span></li>
</ol>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">This is the first content for end users from Trailhead team and step definitely in right direction</span></div>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">If you are a new admin there is one more and you can start right from there </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://developer.salesforce.com/trailhead/trail/lex_admin_implementation">https://developer.salesforce.com/trailhead/trail/lex_admin_implementation</a></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b>Trailhead URL</b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><br /></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b><a href="https://developer.salesforce.com/trailhead">https://developer.salesforce.com/trailhead</a></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Also don't forget to share your progress on twitter and share your badge selfie as I do often </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pbs.twimg.com/media/CNT9jWEUkAAnQBI.png:large" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="293" src="https://pbs.twimg.com/media/CNT9jWEUkAAnQBI.png:large" width="400" /></a></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<br />
<br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">If you love projects ,there are few new projects as well for you </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://developer.salesforce.com/trailhead/projects">https://developer.salesforce.com/trailhead/projects</a></span><br />
<br /></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0tag:blogger.com,1999:blog-9199434648296876494.post-16776350961072592232015-08-16T00:30:00.002-04:002015-08-16T00:46:07.297-04:00Lightning Connect Apex Adaptor<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">If your organization has already subscribed to the Lighting Connect feature(This is available based on Subscription with additional fees .Contact your salesforce AE to learn more ) to create External Objects,it is good to know that apex can be used by your developer to expose data from any system which uses SOAP or REST as external Objects .</span><br />
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">The advantage of using External Objects will be saving some storage space .The data will not reside inside salesforce but can be viewed in salesforce User Interface just like any other objects .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">There are number of limitations worth noting before you decide to go with external objects and salesforce documentation can help you in regards to this </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<b><a href="https://help.salesforce.com/HTViewHelpDoc?id=platform_connect_considerations_compatibility.htm&language=en_US" target="_blank"><span style="font-family: Georgia, Times New Roman, serif;">https://help.salesforce.com/HTViewHelpDoc?id=platform_connect_considerations_compatibility.htm&language=en_US </span></a></b></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">There are lot of chances that you need data only for reading from external system and may later run apex to convert few into transaction data .One of the ways to address this business use case can be using lightning connect .There may be millions of data and with lightning connect you can keep it outside salesforce but still use salesforce interface to view ,search and use apex to convert some to SFDC native objects .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><b>When lightning connect feature was launched you needed an adaptor to convert data into Odata before you could actually consume and bring into salesforce as an external object.</b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><b>Its good to know you dont need an Odata now and an apex written by developer can be used by salesforce administrators to bring any data via SOAP or REST to salesforce .</b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdepqkoN4hYKspZDBoTiP8uW-MX3Mi4iziDtDqyPmvPRGi-L180Q" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdepqkoN4hYKspZDBoTiP8uW-MX3Mi4iziDtDqyPmvPRGi-L180Q" /></a></div>
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div>
<b><span style="font-family: Georgia, Times New Roman, serif;">Aim of the blog Post:</span></b></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"> The main aim of this blog post to show an example to developer community on how to extend data source provider and data source Connection classes to build external data source in salesforce.</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">We will connect to a simple REST end point available for Non commercial financial purpose .To explore more about this webservice please read below </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<a href="http://www.exchangeratelab.com/docs"><span style="font-family: Georgia, Times New Roman, serif;">http://www.exchangeratelab.com/docs</span></a></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Exchangerate Lab provides us free end point for non commercial use to fetch some data that shows latest currency rates for selected Currencies .Please note the aim of calling this webservice is just to demonstrate the Lightning connect feature.</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Georgia, 'Times New Roman', serif;">The first step is to create a DataSource Connection class.</span></li>
</ul>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">The Connection class will provide </span></div>
<div>
<ol style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Metadata definition of the external schema which admin of salesforce will generate based on need by just clicking a button</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Query method to query the data from API.</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Search method to implement the search via global search</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Filters and pagination if needed can be implemented in query and search methods</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Write a JSON parser for mapping data to fields</span></li>
</ol>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">The below code is self explanatory and it connects to exchangedate labs to fetch currencies and exchange rates</span></div>
</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/msrivastav13/151abb8da4bfba0412c2.js"></script></div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">The next step is to create a Data source Provider class that describes the functional abilities like authentication mechanism ,capabilities provided by the data source</span></li>
</ul>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">The below code shows an example class and format </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><script src="https://gist.github.com/msrivastav13/01f18984d69c3597dc06.js"></script></span></div>
</div>
<span style="font-family: Georgia, Times New Roman, serif;">The below shows the video on how Admin will configure with simple clicks for magic </span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/mlowR8Q6x_c/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/mlowR8Q6x_c?feature=player_embedded" width="320"></iframe></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><b>References:</b></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span>
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://www.blogger.com/goog_1600521237">https://help.salesforce.com/HTViewHelpDoc?id=limits_external_data.htm&language=en_US</a></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://www.blogger.com/goog_1600521237"><br /></a></span>
<span style="font-family: Georgia, Times New Roman, serif;"><a href="https://www.blogger.com/goog_1600521237">https://developer.salesforce.com/blogs/engineering/2015/05/introducing-lightning-connect-custom-adapters.html</a></span><br />
<a href="https://www.blogger.com/goog_1600521237"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></a>
<a href="http://docs.releasenotes.salesforce.com/en-us/summer15/release-notes/rn_forcecom_external_data_apex_adapter.htm"><span style="font-family: Georgia, Times New Roman, serif;">http://docs.releasenotes.salesforce.com/en-us/summer15/release-notes/rn_forcecom_external_data_apex_adapter.htm</span></a><br />
<br /></div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com1tag:blogger.com,1999:blog-9199434648296876494.post-45024618855216895452015-08-10T17:37:00.003-04:002015-08-10T23:22:13.590-04:00TrailHead Goodness<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Most of my friends who come from Java world into apex often ask me about where can they find quick tutorial on CRM lifecycle and quick hands on tutorial on how to use Account Management ,Contact Management ,opportunity management and so on.</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">TrailHead has got some modules now to explain all of this in depth .</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Lets summarize each of the modules and see what they help us learn</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Account & Contacts</span></b><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXxiXhHc0Jn-yw1QWcGlnmlrrafKzIgbI_UVG_zu2b25UMDhW5tjw8xIuESXa-h8alKnqIvh2LNVpYvCnMNEc266sl0kXI5bo2OKfm7W6tPb-SkPjocgZGFN6s4qkUeWcRrz4vr8oEX-G/s1600/Accs.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXxiXhHc0Jn-yw1QWcGlnmlrrafKzIgbI_UVG_zu2b25UMDhW5tjw8xIuESXa-h8alKnqIvh2LNVpYvCnMNEc266sl0kXI5bo2OKfm7W6tPb-SkPjocgZGFN6s4qkUeWcRrz4vr8oEX-G/s400/Accs.PNG" width="400" /></span></a></div>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">If you quickly want to learn how to create some Test Accounts and Contacts and understand relationship among them worth spending your half an hour with this module</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">CRM Basics</span></b><br />
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-iMVrGkC8sCo/VckUKg0lGVI/AAAAAAAABmA/XCUImIbutAg/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><img border="0" height="180" src="http://2.bp.blogspot.com/-iMVrGkC8sCo/VckUKg0lGVI/AAAAAAAABmA/XCUImIbutAg/s400/Capture.PNG" width="400" /></span></a></div>
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></b>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Now this may sound silly if you know the concepts but fact is most of developers we dont think of business case for which we spent hours writing code .The basics of salesforce starts with knowing CRM .This module for me should have been first module of TrailHead .Never too late .Grab a coffee and spend some time working on this Trail Badge .</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Leads and Opportunities</span></b><br />
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-A9cyY7YceJ4/VckVTtkiFoI/AAAAAAAABmI/aRvr-CmJR_o/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><img border="0" height="200" src="http://2.bp.blogspot.com/-A9cyY7YceJ4/VckVTtkiFoI/AAAAAAAABmI/aRvr-CmJR_o/s400/Capture.PNG" width="400" /></span></a></div>
<b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></b>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">I would open this module for Training end users .Before we onboard our sales or marketting team ask them to get this badge and I am sure this will help them to gain better understanding on how salesforce will increase their productivity.Explain them the significance of keeping data clean and ask them to create some test data in training environment before they start using the system in their Production Environment .</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<b style="font-family: Georgia, 'Times New Roman', serif;">Event Monitoring</b><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">If you are a system architect I would recommend you to learn more about <b>Event Monitoring</b> module .This will give you great insight of how to track various events like login ,logout ,usage of API ,UI clicks .All this will help to draw inference about how the system you have built is being adopted .</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Adoption is key metric and this module will help you understand how to pull event log files from SFDC and how to report and analyze reports .</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-gxIczyHR318/VckXNKXJqhI/AAAAAAAABmU/a3csA7SLe10/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><img border="0" height="200" src="http://3.bp.blogspot.com/-gxIczyHR318/VckXNKXJqhI/AAAAAAAABmU/a3csA7SLe10/s400/Capture.PNG" width="400" /></span></a></div>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Finally if you are going to dreamforce how cool it is to gather information prior to that and do some homework.Dreamforce module is amazing way to prepare you for this .</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-nAYQCIh0ryY/VckXtSHWxaI/AAAAAAAABmc/oOb0tWLPsxU/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><img border="0" height="195" src="http://3.bp.blogspot.com/-nAYQCIh0ryY/VckXtSHWxaI/AAAAAAAABmc/oOb0tWLPsxU/s400/Capture.PNG" width="400" /></span></a></div>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">If you are a geek and Nerd ,then do some Projects and get hands dirty .Follow the Trailhead Project link below</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<a href="https://developer.salesforce.com/trailhead/projects"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">https://developer.salesforce.com/trailhead/projects</span></a><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Finally grab all Trailhead badges as I did and beat me up :))</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pbs.twimg.com/media/CLaPMX2VEAAA2k4.png:large" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><img border="0" height="362" src="https://pbs.twimg.com/media/CLaPMX2VEAAA2k4.png:large" width="400" /></span></a></div>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0tag:blogger.com,1999:blog-9199434648296876494.post-23210634389787036472015-07-12T02:17:00.000-04:002015-07-12T02:31:58.996-04:00Salesforce Lightning Components Hello World SPA Project<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">Lightning component framework from salesforce is amazing add on to platform .To build Single Page Applications there are lot of modern framework like angular ,backbone,ember,meteor,react Js and lot more.Every framework comes with its own advantages and disadvantages .Salesforce lightning is one among them which is fast maturing .</span><br />
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">I was reading through lightning component developer guide recently and just to explore art of possibilities I did a quick Lightning SPA project that shows below listed functionality:</span></div>
<div>
<br />
<ol style="text-align: left;">
<li><span style="font-family: Georgia, 'Times New Roman', serif;">Quick Add ,Edit and Delete Account to Salesforce from standalone lightning App or Salesforce 1</span></li>
<li><span style="font-family: Georgia, 'Times New Roman', serif;">Using bootstrap library for UI in lightning project</span></li>
<li><span style="font-family: Georgia, 'Times New Roman', serif;">How to achieve simple navigation using CSS toggle </span></li>
<li><span style="font-family: Georgia, 'Times New Roman', serif;">How to display error messages from server by dynamically creating lightning component markups</span></li>
<li><span style="font-family: Georgia, 'Times New Roman', serif;">Effective use of Events to communicate between components .</span></li>
</ol>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Lets take a demo video of the application before deep dive into some of the awesome stuff I have</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/TJVaTiYGUFI/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/TJVaTiYGUFI?feature=player_embedded" width="320"></iframe></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Some of the key points I noted while doing this SPA Project are as below</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<b><span style="font-family: Georgia, Times New Roman, serif;">Events :</span></b></div>
<div>
<b><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></b></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Events are really cool .If you are not familiar with event driven pattern then you will have some tough time .In event driven pattern key is two components communicate with each other using events .There will be Subscriber component and a publisher component .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Publisher component will publish event using aura:register tag.The events needs to be fired on action from button click or through any events.A simple example in my application when I create New Account ,my edit component fires an event and the main LightningSPA component listens to the Event and performs necessary actions needed </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://developer.salesforce.com/docs/resources/img/en-us/196.0?doc_id=trailhead%2Fimages%2Flightning_components_events_app.png&folder=lightning" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="258" src="https://developer.salesforce.com/docs/resources/img/en-us/196.0?doc_id=trailhead%2Fimages%2Flightning_components_events_app.png&folder=lightning" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">The below code self explains the principle of firing events and then handling the event back </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<script src="https://gist.github.com/msrivastav13/c5cf253e24cf3eef5217.js"></script>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><b>Routing:</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">I miss angular routing here where one could easily navigate between templates .If your application is not running as standalone and you want only for salesforce 1 mobile client ,there are bunch of navigation support provided </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<b><a href="https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one.htm"><span style="font-family: Georgia, Times New Roman, serif;">https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one.htm</span></a></b></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">If we need for both standalone and SF1 one way document recommends is using below code</span></div>
<div class="separator" style="clear: both; text-align: left;">
<script src="https://gist.github.com/msrivastav13/94ca3c584529b32ef1cc.js"></script>
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">For my app I prefered old school approach of toggling using CSS as it makes it super fast .</span></div>
<script src="https://gist.github.com/msrivastav13/3a362a5ed97832307847.js"></script>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><b>Displaying Error Message:</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">Error handling at client side is easier if we dynamically create alert messages .One of the approaches for same is as below </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<script src="https://gist.github.com/msrivastav13/f3e852c8c521028f7133.js"></script>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">What are key things that would be needed if you are submitting for security review</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol style="text-align: left;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Make sure FLS is handled in backend code for apex </span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Make sure you do DML access check at backend apex</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">As far as possible avoid use of third party libraries (We cant totally avoid agree),but would recommend to use framework specified tags </span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Name space your bootstrap .There is an online tool that can help you do this </span><a href="https://bootstrap-namespacer.herokuapp.com/"><span style="font-family: Georgia, Times New Roman, serif;">https://bootstrap-namespacer.herokuapp.com/</span></a></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Avoid usage of <span style="background-color: white; font-size: 15px; line-height: 16.5px;">aura:unescapedHtml</span></span></li>
<li><span style="background-color: white; font-size: 15px; line-height: 16.5px;"><span style="font-family: Georgia, Times New Roman, serif;">On page load init handlers avoid DML .</span></span></li>
</ol>
<div>
<span style="font-family: Georgia, 'Times New Roman', serif;">Few more documented below</span></div>
<div>
<span style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></div>
<div>
<span style="font-size: 15px; line-height: 16.5px;"><span style="font-family: Georgia, Times New Roman, serif;"><a href="https://developer.salesforce.com/page/Lightning_Security">https://developer.salesforce.com/page/Lightning_Security</a></span></span></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: Georgia, Times New Roman, serif;">The fun part </span></b></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;">I am sharing all code in my github library .So feel free to pull and do changes ,suggest changes ,tweet me concerns .</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><a href="https://github.com/msrivastav13/Lightning-SPA-App">https://github.com/msrivastav13/Lightning-SPA-App</a></b></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-RyoRsDoH_Iw/VaIJSo8DAtI/AAAAAAAABjc/9bgVCmeMF1M/s1600/Capture2.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-RyoRsDoH_Iw/VaIJSo8DAtI/AAAAAAAABjc/9bgVCmeMF1M/s400/Capture2.PNG" width="197" /></a></div>
<div>
<a href="http://4.bp.blogspot.com/-N6bhBedFMVc/VaIJRLcnxDI/AAAAAAAABjU/5p6wr0R1--o/s1600/Capture1.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="http://4.bp.blogspot.com/-N6bhBedFMVc/VaIJRLcnxDI/AAAAAAAABjU/5p6wr0R1--o/s400/Capture1.PNG" width="201" /></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Z7-h1YDMdWs/VaIJT3ixIEI/AAAAAAAABjk/27wknTyMWHw/s1600/Capture3.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="http://4.bp.blogspot.com/-Z7-h1YDMdWs/VaIJT3ixIEI/AAAAAAAABjk/27wknTyMWHw/s400/Capture3.PNG" width="197" /></a></div>
<br />
<a href="http://1.bp.blogspot.com/-BHsiTOVvvLg/VaIJVDFrEyI/AAAAAAAABjs/ZvanK-Io690/s1600/Capture4.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-BHsiTOVvvLg/VaIJVDFrEyI/AAAAAAAABjs/ZvanK-Io690/s400/Capture4.PNG" width="197" /></a><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<br /></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com6tag:blogger.com,1999:blog-9199434648296876494.post-56059553539835219572015-06-20T16:37:00.001-04:002015-06-20T16:38:48.858-04:00Installing Lightning Package Plugin On Sublime Text On Windows 8<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">Building Lightning components is next task we will all be bombarded with as Lightning from salesforce emerges as a mature framework .</span><br />
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Having proper developer environment set up locally helps us to code effectively and helps to organize code .Subime text 3 editor makes editing files simpler and mavens mate plugin for writing apex and VF is great.</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">For lightning components we luckily have a package control plugin which we can install on top of sublime text and edit lightning components directly using mavensmate .</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Already Raja from Salesforce describes how to install the plugin on MAC machine .Please watch the below video from him </span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<a href="https://www.youtube.com/watch?v=g65FcLVSLX0"><span style="font-family: Georgia, Times New Roman, serif;">https://www.youtube.com/watch?v=g65FcLVSLX0</span></a></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">For windows machine i have one below ,if you are using windows I hope below video is helpful</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/s_vi/KXg8Rkb-hck/default.jpg?sqp=CPScl6wF&rs=AOn4CLBu4unnSRntBd7GEDy-tipdlFHosA" frameborder="0" height="266" src="https://www.youtube.com/embed/KXg8Rkb-hck?feature=player_embedded" width="320"></iframe></span></div>
<div>
<br /></div>
</div>
Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com2tag:blogger.com,1999:blog-9199434648296876494.post-43561672898121174992015-05-28T11:27:00.004-04:002015-05-28T12:35:47.389-04:00Dallas MeetUp -May 27<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;">Last night Dallas meetup was so much fun .I had the chance to present on Angular + Bootstrap + Visualforce with sample code .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">I am so glad it went really well and also provided me opportunity to connect with lot of local folks who are excited to be a part of Salesforce Community .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">Quickly wanted to share the code sample that I presented at meetup .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">A simple responsive page to add Account Card was built using bootstrap and JS remoting along with angular concept of using modules .</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;">The Presentation is at slideshare so that if you missed my session you can go through the same .It covered basics of bootstrap and angular JS and then explained the code snippet of how to use angularJs in salesforce .</span><br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" src="//www.slideshare.net/slideshow/embed_code/key/Jk5qDFUfmlrxZx" style="border-width: 1px; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="500"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://www.slideshare.net/MohitkumarSrivastav/dallas-meetup" target="_blank" title="Dallas meetup">Dallas meetup</a> session on Bootstrap + Angular + Visualforce </strong>from <strong><a href="https://www.slideshare.net/MohitkumarSrivastav" target="_blank">Mohitkumar Srivastav</a></strong> <br />
<br />
<span style="font-family: Georgia, Times New Roman, serif;">The code samples I have shared on Github</span><br />
<br />
Apex Controller<br />
<br />
<script src="https://gist.github.com/msrivastav13/34ad3455be267a721f5a.js"></script>
<br />
Visualforce Page<br />
<br />
<script src="https://gist.github.com/msrivastav13/e67dd98dfeec8ed20a21.js"></script>
</div>
Hopefully this session was helpful .Please let me know how you feel about the whole session .Thanks<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>Mohithhttp://www.blogger.com/profile/14211795337008571017noreply@blogger.com0