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