Lightning components - Where all can I have thee...

With Salesforce investing lot on lightning components and I am sure lot of devs in salesforce world have started working with lightning components .

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 .

Exciting ...Exciting ...Lets start...

• Add Lightning Components to Salesforce1

 The appHostable interface makes the component available as a custom tab.

All that one has to do is to create a lightning custom tab from salesforce Tabs and add to SF1 Navigation's .

• Add Lightning Components to Lightning Experience

The interface implemented remains as appHostable .The key here is how we can add this tab to new App launcher 

• Configure Components for Communities

• Configure Components for Lightning App Builder

• Configure Components for Lightning Experience Record Home Pages (PILOT)

A good example can be one demonstrated by BalaKishan.Please read his articles on lightning .Some great insights into it .

The key here is you have an attribute recordId and sObjectName populated automatically with correctId and API name

<aura:attribute name="sObjectName" type="String"></aura:attribute>

    <!-- Atrribute Defination for Record Id -->

 <aura:attribute name="recordId" type="String"></aura:attribute>

• Add Lightning Components to Visualforce Pages

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 .

The sample component code The VF code will look like below




I hope you enjoyed this little article :)

Lightning Components Tokens

One of the coolest addition to lightning components in Spring 16 release has been Lightning components Tokens .This feature is in developer preview mode and I already see use case for this feature .

Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.

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 .

Developer console is quickest method to edit and create lightning resources .In developer console you will see lightning tokens 

To create a design token simply click on the lightning Tokens

File | New | Lightning Tokens.

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.

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 .

Here is a sample lightning component tokens file 

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.

Here is a sample example component showing how to use design tokens in CSS resource file .


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 .

I am eagerly waiting to see updated lightning components developer guide where salesforce will expose some of the tokens used in the SLDS .

Feel free to spread the word of this upcoming feature but note that salesforce safe harbour applies .

Apex Testing goodness in spring 16

Spring 16 release notes has been great read .If you have not read ,find some time and do a quick scan to discover some really cool features .

Apex Testing enhancement coming  in spring 16 caught my attention and this blog post covers them in detail .

1)Ability to set createdDate value for test data before Test.startTest()

The below test class demonstrates this new feature 



2)Test Suite

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 Mavensmate or Welkins Suite 

The Suite Manager helps to add or remove Test classes to existing suites or form a new suite or delete existing test suites.

3)Stop a Test Run That’s Failing Miserably

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.

The Developer Console’s test run configuration panes have a new Settings button. 
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.

I don't see this yet in spring 16 preview org and i assume it will be delivered .

4)Call Test.startTest() to Reliably Reset Limits in Apex Tests

5)Use @future to Avoid the Dreaded MIXED_DML_OPERATION Error in Apex Tests

To avoid mixed DML we used future method to separate transactions and this caused failures in test class .There are number of workarounds available 

1)We wrapped the code in future method with system.RunAs 
2)Also we  enclosed the code block that makes the future method call within Test.startTest and Test.stopTest statements.

check below link to know the workaround used before this release

https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_dml_non_mix_sobjects_test_methods.htm

All these workarounds no more needed and test class now does not throw mixed DML

Check the example documented for more details

https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits 

6)Test support for asynchronous WSDL based callouts

There is a neat example on how to approach test case for asynchronous WSDL callout in apex guide 

https://releasenotes.docs.salesforce.com/en-us/spring16/release-notes/rn_apex_tests.htm#rn_apex_tests_limits

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 .

Trailhead Awesomeness Continues...

Last night I completed new modules and new project on Trailhead 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 .

Lets talk about what will you learn once you complete these new modules and why it is worth to spend time on these

Boost your Apex Integration Skill set

Apex Integration Services

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 .

The new module Apex Integration Services 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 .

Take your ability to debug and write formulae in force.com to next level

Advanced Admin Trail

Advanced Formulas 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 .

Continue your lightning experience adventure with new modules LEX chatter basics and LEX data management

LEX Data Management

LEX Chatter Basics

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 .

Build an awesome app learning platform basics and also give yourself a chance to win Astronomical Prizes

Battle Station App

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.

https://developer.salesforce.com/trailhead/project/workshop-battle-station

Apart from these  Application Lifecycle Management module  is being rewritten to provide more awesome content .

Enjoy Trailhead and dont forget to post your selfie with badges completed on twitter .Also now you can add those badges to your linkedIn profile .

Trailhead Selfie

IOS and Visualforce in Salesforce 1 app Hicups

Lighting 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 .

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.

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

1)Key freezing issue with HTML input tags

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 .

This looks to be serious issue with new version of IOS and Salesforce 1 app .Even you are using twitter typeahead for autocomplete or lookups this issue can be easily observed and keys will freeze once you make selection .

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


2)Not able to scroll the iframe embedded in Visualforce inside SF1 container for iPad or iPhone 

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


There are also certain things that we need to note about navigation pattern we follow in SF1 specific apps

1)When navigating to the external world the right function to use is as below

navigateToURL(​url​[, isredirect])

If you want SF1 container not to remember the history set redirect parameter to the true state.

2)Use back function to navigate to the back and use redirect parameter as true if you want your page to refresh

back(​[refresh])

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.

I hope you enjoyed this post and will help you troubleshoot issues with SF1 app

Using Lighting Out with Visualforce

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 .

For external system mashup you will need to first establish connection with SFDC using connected apps .

There is an excellent  session on this topic .

 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

Balkishankachawa.wordpress.com/2015/10/31/lightning-component-javascript-remoting-and-visualforce-page/

http://peterknolle.com/lightning-components-in-visualforce/

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 .

USE CASE :::

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 .

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 .

Lightning components interestingly provide "ui:inputRichText"  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 .

Using lightning out we can integrate a component into visualforce with few lines of javascript .

We will also see how to use the callback function provided to grab the component attribute value back into our visualforce page 

COMPONENT CODE::

If you are familiar with lightning components its 101 of that .A simple component being embedded .

LIGHTNING DEPENDENT APP:

This is similar to declaring dependency just like how we write import statements in java or node.

VISUALFORCE CODE::

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

         var richtext;
             $Lightning.use("c:RichtextApp", function() {
                 $Lightning.createComponent("c:Richtextcmp", {},
                     "richTextEditor",
                     function(cmp) {
                         // do some stuff
                         richtext = cmp;//Very important
                     });

             });

The final screens are below

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.

Using Jquery with SLDS for validation and Error Display

Recently I have been playing around with SLDS  design system and for sure this has better component set for building mordern applications with excellent look and feel for Mobile or desktop .

One of the key challenges using this library in visualforce (Not in lightning components) is there is no javascript support for CSS unlike bootstrap  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 .

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 Angular 2 and React is still in its intial phases (Although this framework is widely adapted now and has its own advantages and flexibility).

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 .

Check the below project in Trailhead and its a good starting point to get started with using SLDS in lightning components

https://developer.salesforce.com/trailhead/project/slds-lightning-components-workshop

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 .

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 .

The source code for the plugin is available at below gist 

https://gist.github.com/msrivastav13/dd45242d3484c6b76f8a

Lets walk through a simple use case on how to use this .

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.

We will need three libraries installed to see a working demo

1. Salesforce SLDS CSS library latest version
2. Jquery library 
3. SLDS Validator plugin from my gist 

The page code for ease is below

The apex code for ease of our eyes is below

Plugin set up Instructions

All the visualforce coder needs to handle  in HTML of input tag is to add two extra  attributes declaratively

1. data-required (Make this to true if you want the field to be required)
2. data-fieldName (Field label that will be displayed as error )

In Javascript remoting you will just wrap your remoting call with below

if (!validatorSLDSplugin.validate()) {

}

Sample screenshot of how this looks

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 .

From SLDS library the classes are as below

• success--slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture
• failure ---slds-notify slds-notify--alert slds-theme--error slds-theme--alert-texture
• info ---slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture

A sample example of how to invoke the validator is as below for success message

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

Handling SVG images

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 .

The refresh can be done as below in Jquery

j$("#messagewrapper").html(j$("#messagewrapper").html());


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)

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 .

var imageURL = "{!URLFOR($Resource.SLDS102, 'assets/icons/action-sprite/svg/symbols.svg#close')}";

I hope you enjoyed this post .

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 .