Visualstrap SLDS - Visualforce Lightning Styled Components

Wednesday, November 23, 2016

Visualstrap SLDS takes Visualstrap further, It gives you a bunch of components that are based on newly released Lightning Design System.

Visualstrap SLDS gives you a set of components that helps you quickly design Lightning Styled VF pages. Visualstrap SLDS uses the same known attributes that are used by Visualstrap and most of the apex standard VF components.

Visualstrap SLDS is still in development and is improving , to make it more usable. Here is a link to repo where you can download and install the components.

Repo

https://github.com/Avinava/visualstrap-slds

Demo Site

http://visualstrap-developer-edition.ap15.force.com/apex/VisualStrapGettingStarted

Visualstrap Updated #NotDeadYet

Monday, July 13, 2015

Visualstrap almost now has 1600 appexchange installs around 3500 installs from the project page , well, for me thats too many orgs!
Thanks for all the support and yes, its not dead yet !

Finally upgraded the Visualstrap to Bootstrap 3.3.5 .

Visualstrap 1.61 What's new ?

• Updated to Bootstrap 3.3.5
• Many CSS Bugfixes
• New themes 'cosmo','slate','simplex' and 'paper'
• Includes new Material Design theme 'paper'
• New component ribbon
• depth classes
• collapse support for navbar

Screenshots and Links (theme = paper)

http://visualstrap-developer-edition.ap15.force.com/VSDashBoards1

http://visualstrap-developer-edition.ap15.force.com/VSResponsive

http://visualstrap-developer-edition.ap1.force.com/VSLead

http://visualstrap-developer-edition.ap1.force.com/VSLogin

Installation Link : https://appexchange.salesforce.com/listingDetail?listingId=a0N3000000B56AMEAZ

Project Page : http://visualstrap-developer-edition.ap1.force.com/

Github : https://github.com/Avinava/VisualStrap

Angular JS & SObject Remote : Part 2 Updating Data from Page #NoControllers

Monday, June 22, 2015

So finally the Part 2 of the #NoController series , In this part we will try to update the records that were retrieved from the Salesforce using SObject Remote.

If you haven't gone through the Part 1 of this , you can have a look here

http://blogforce9.blogspot.in/2015/04/angular-js-sobject-remote-part-1.html

Updating Records

• Will be using update method of sObject Remote
• Records will be updated as soon as the input elements losses focus (blur)

After all this was not that complicated :-)

Demo : https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemoteUpdate

Custom Rich Textarea : Taking it further

Sunday, April 19, 2015

Rich Text Areas / Field , lets is like a small editor which lets you format your content. Thats really cool feature when you want that field to merged into a PDF / Email or in an document. But whats not so cool is when you add an RTF to a Visualforce page you no longer can rerender the page and you have to let the page refresh fully. Thats really sad.

The visualforce RTF editor uses CKEditor which is widely used for the same purpose and has an open API / Method, which exactly was the Idea behind the custom-rtf component. Introduce some JS in the page and customize the toolbar and along with bring back the ability to rerender the page.

Introducing Custom-rtf

• Lets you customize the Toolbars
• Lets you rerender the VF page
• Easy to using vf component

Syntax

Attributes

• targetclass : Styleclass of the Textarea that needs to be rendered as RTF
• toolbar : Different toolbars available

Toolbar options

• Full
• Visualforce
• HomePageComponent
• SalesforceBasic
• EmailMultiFormat
• Email
• SalesforceLight
• Knowledge
• KnowledgeWithIframes
• ServiceCommunity

Screenshot

Github / Installation 

https://github.com/Avinava/custom-rtf

Trailhead

Monday, April 6, 2015

Salesforce trailhead is here for a while, but I somehow avoided it , but finally decided into jumping into the same. There is whole big list of modules in there but the one that certainly draw me to itself was Visualforce Mobile !

Trailhead really a fun way to learn stuff about platform, and really presents the concepts well.

About the Visualforce Mobile Module

This module takes you from Basic to advanced custom css to suite the look and feel of Salesforce1. It covers all of them !

• A quick getting started
• A quick small tour to using Salesforce RemoteObjects in visualforce pages.
• Using global Actions
• Talks a lot of bot Salesforce1 design and StyleGuide. Mainly focused about how to make your pages mobile 
• Also the one-starter library
• And finally a bit about different JS libraries like AngularJS , Ionic and Bootstrap

Why its important ?

Well trailhead is really well compiled module, and I wish I had covered this a bit before ! I have already covered similar topics in my past but it still looks fresh. At the end of the day on mobile UX does matters. A mobile user definately wants the information to be presented in a well organized manner. Something like

Trailhead was a really fun experience and awesome way to learn the Mobile Visualforce pages ! And hey there are lot many modules in there. Here are the few from my todo list

You can read them all here 

https://developer.salesforce.com/trailhead/modules

Angular JS & SObject Remote : Part 1 Bringing Data to Page #NoControllers

Friday, April 3, 2015

Finally back after long long time!

I have been working with AngularJs for a while now and I find Angular to be really helpful to create stateless interactive pages and best part is you hardly need any Apex Controller for the same. Pages are fast, fluid and Mobile friendly (Salesforce 1).

With time I have found the best ingredient to prepare your AngularJS page are

• AngularJS ( of course )
• SObject-Remote (thanks to Jason Venable)
• Bootstrap (not required)

Lets start with a simple example.

Bringing data to the page

This would be a pretty easy example where we will be using SObject-Remote to bring query data from Salesforce Accounts

The Catch

• The area ng-controller marks the area which can access the $scope variable of that particular controller.
• You can access variable inside $scope by using {{}}. If you have a variable $scope.accounts you can directly access that in page by doing {{accounts}}, just like regular merge field but a bit different syntax.
• We have used $scope.$apply() , which generally tells angular to redraw the UI  / View. Since remoting works async we need to notify the angular to redraw once we have the data by calling this method.

End Result

Finally a stateless fluid page without any controllers.

Demo : https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemote

Visualforce RichText Area Component - Rerender vf pages containing rtf

Sunday, January 25, 2015

You might faced a challenged, atleast once while developing pages, where you need to rerender the page which contains a <apex:inputFile/> or an Rich Text area field <apex:textarea richtext="true"/> . There is no out of the box solution for this but there is alternative solution where you can implement a CKEditor to do so.

How can I solve this ?

I have been using ckeditor for quite sometime and eventually developed a vf component for myself called "customrtf". Customrtf is based on salesforce's rich text implementation and borrows code from it. This is the very fist version of the component, and many other features will come eventually.

What it does ?

• Lets you convert a textarea into a richtext area
• Allows re-rendering of the page

How to use it ?

Installation & Demo : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Po0Yc
Git : https://github.com/Avinava/custom-rtf