Showing posts with label remote. Show all posts
Showing posts with label remote. Show all posts

Extend Salesforce Rich Text Editor as Multi-Purpose

Sunday, March 10, 2013 by Aslam - The Alexendra
Hi All,
Recently one of client wants some enhancement to existing 'Send Email' screen. They want some functionalities which standard email editor does not support and even salesforce Rich Text Editor also does not support.
I did some research and found that we can extend standard salesforce Rich Text Editor in many ways. One of the enhancement which I did, I am going to show you all.

Client wants a way to fetch all related contacts and opportunities from current account in the email editor on the place he wants and editable and also wants to control as many times as he needed. To achieve this task, I came up with the custom button solution which can be embedded into standard Rich Text Area of salesforce and can attach some event handlers to them.


I created one component called "AddButtonToolbar". In this component, for demo purpose i have created two custom buttons for showContacts and showOpportunities. But you can make as many as you want. Here is the basic configuration you can do:

<apex:component> <apex:attribute name="accountId" type="string" description="passed account id"/> <script src="{!URLFOR($Resource.ckeditor,'ckeditor/jquery-1.4.2.min.js')}"></script> <script> //Event Handler for ShowContacts button //Fetch and prepares the contact table in editor function showContacts(){ // invoke your sfdc method here } //Event Handler for ShowOpportunities button //Fetch and show the opportunities in RTE function showOpportunities(){ // invoke your sfdc method here } /**** Custom buttons configuration Provide name, label, command (js function), and Image for the button */ var config = { "Buttons": [ { "Name" : "Contacts", "Label" : "Show Contacts", "Command": "showContacts", "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/16-cube-green.png')}" }, {"Name" : "Opportunities", "Label" : "Show Opportunities", "Command": "showOpportunities", "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/contact.png')}" } ] } function initialize(){ for(var i=0; i<config.Buttons.length;i++){ addButton(config.Buttons[i].Name, config.Buttons[i].Image, config.Buttons[i].Command, config.Buttons[i].Label); } } function addButton(name,image,command,label){ $('#cke_21').append('<span class="cke_toolbar_start"></span>'+ '<span role="presentation" class="cke_toolgroup">'+ '<span class="cke_button">'+ '<a onclick="'+command+'();" onblur="this.style.cssText = this.style.cssText;" role="button" hidefocus="true" title="'+label+'" class="cke_button_outdent cke_disabled" id="'+name+'" aria-disabled="true">'+ '<span class="cke_icon" style="background-image:url('+image+');background-position:center;">&nbsp;</span>'+ '<span class="cke_label" id="'+name+'">'+label+'</span>'+ '</a>'+ '</span>'+ '</span>'+ '<span class="cke_toolbar_end"></span>' ); } var defaultFunc = window.onload; window.onload = function() { if(defaultFunc) defaultFunc (); setTimeout("initialize()",1000); } </script> </apex:component>

Line #21-#35 shows configuration option for your buttons.
initialize() method starts creating the buttons.

Here is a working demo for above functionality:
http://labsprojects-developer-edition.ap1.force.com/ExtendRTE?id=001900000054UZ7

You will see two buttons on right side. Click on those buttons to see things in action.

Additionaliy you can put your email address and try to send email to your account to see how email will look.

Mail me for full code as always :)

Thanks
Aslam Bari

Salesforce Remoting & jQuery Drag/Drop Mash-up

Wednesday, February 27, 2013 by Aslam - The Alexendra
Hi All,
Today I am going to show you a good useful mash-up using jQuery Drag/Drop feature with Salesforce Remoting. I have created a simple application where user can see a Dashboard where all Un-Assigned tasks are shown on left side. All available contacts will be available on right side.
Now, user can drag any task from left side list and drop on right side, for any contact. Internally the Task will be assigned to that particular Contact. This is done internally using Salesforce Remoting.
This type of applications are very convenient to use and do the work smoothly.



You can test the application here.
http://labsprojects-developer-edition.ap1.force.com/TaskAssignmentDashboard

Here are few assumptions/points regarding above demo;

1) I have used Contacts to assign the Task but actually we must use Users
2) I have given demo for Tasks, but we can use this application for other useful things like Cases, Leads and Opportunity assignments
3) The demo actually will not update the records in database. I have commented actual database update because of demo purpose. You can only check the drag and drop and assignments.

Mail me if you need the code for above demo.

Your suggestions to improve this app , are always appreciated.

Thanks
Aslam Bari