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 .