Free JQuery Mobile Adoption Manager JavaScript Code

Written by ShamrockCRM on August 26, 2012 – 9:03 pm

This is Part 3 in the series of Salesforce.com HTML5 Mobile Development using VisualForce, APEX, JavaScript (JQuery Mobile) and HTML5.  I have already posted the code for the Visualforce as well as the APEX Controller.  This part in the series provides you with the JavaScript code to finalize everything.  The combination of all of this will show you how to implement this Adoption Manager AppExchange app for managing the adoption of your users.

A couple of notes here.  This code is certainly not optimized and certainly not prettied up.  A lot of the functions need to be merged into cleaner functions.  The memory usage could probably optimized a little better.  There are a couple of other things to play with as well.  This is basically a way to help you learn how to implement different features using Salesforce.com in HTML5 with JQuery mobile, such as querying profiles and dynamically populating a form picklist and displaying lists of users on the screen and activating/deactivating users, etc.  Take what you will from this, but it is a fully functional mobile app for you to hack and place into PhoneGap if you would like.

Salesforce JQuery Mobile

This code goes into the usermanager.resource static resource (after the break).
Read more »


Tags: , , , , , , , ,
Posted in Salesforce Mobile, VisualForce, Web Development | Comments Off on Free JQuery Mobile Adoption Manager JavaScript Code

Salesforce Mobile Dev Part 2 – APEX Controller

Written by ShamrockCRM on July 27, 2012 – 1:08 pm

Yesterday, I posted the VisualForce code for developing a mobile “insert user” page.  Today, I am posting the details on the APEX Controller required to perform the heavy lifting in Salesforce.

This APEX Class will perform a few tasks: 1) It will query the available Roles, User License types, and Profiles for population into the dropdown select lists. 2) Perform an “insert” of the new user into the database. 3) Return the DML error message if an error occurred (e.g. username already exists, etc.).

Currently, this code is only enabled to work with the “Salesforce” User License type. This could be enhanced to allow for Force.com platform licenses, Chatter licenses, etc.

global with sharing class usermanagerController {

    @RemoteAction
    global static String insertUser(String firstName, String lastName, String email, String profile, String role, String sendEmail) {
        try {
            String alias = firstName.substring(0, 2) + lastName.substring(0, 2) + email.substring(0, 2);
            User u = new User(IsActive = true, FirstName = firstName, LastName = lastName, Email = email, Username = email, ProfileId = profile, UserRoleId = role, Alias = alias, DefaultGroupNotificationFrequency = 'D', DigestFrequency = 'D', EmailEncodingKey = 'ISO-8859-1', LanguageLocaleKey = 'en_US', LocaleSidKey = 'en_US', TimeZoneSidKey = 'America/Los_Angeles', UserPermissionsCallCenterAutoLogin = false, UserPermissionsMarketingUser = false, UserPermissionsOfflineUser = false);

            if (sendEmail == 'on') {
                Database.DMLOptions dlo = new Database.DMLOptions();
                dlo.EmailHeader.triggerUserEmail = true;
                u.setOptions(dlo);
            }
            insert u;
        } catch (DmlException e) {
            return e.getDmlMessage(0);
        }
        return 'true';
    }

    @RemoteAction
    global static List < Profile > queryProfile() {
        //Only works for SFDC, enable later for Force.com with a dependent picklists in jquery
        ID salesforceUserLicense = [Select Id from UserLicense where Name = 'Salesforce'
        limit 1].Id;
        String profileQuery = 'Select Id, Name, UserLicenseId From Profile where UserType = \'Standard\' And UserLicenseId = :salesforceUserLicense ORDER BY Name ASC';
        List < Profile > p = Database.query(profileQuery);
        return p;
    }

    @RemoteAction
    global static List < UserRole > queryRole() {
        String roleQuery = 'Select Id, Name From UserRole where PortalType = \'None\' ORDER BY Name ASC';
        List < UserRole > r = Database.query(roleQuery);
        return r;
    }

    @RemoteAction
    global static List < UserLicense > queryUserLicense() {
        String ulQuery = 'Select Id, Name, LicenseDefinitionKey From UserLicense where Name =\'Salesforce\' limit 1';
        List < UserLicense > ul = Database.query(ulQuery);
        return ul;
    }
}

Next, I will post details on the JavaScript.


Tags: , , , , , , ,
Posted in Force.com User Adoption, HTML5, Salesforce Mobile, Salesforce.com | Comments Off on Salesforce Mobile Dev Part 2 – APEX Controller

Salesforce Mobile Development – Create New User Code

Written by ShamrockCRM on July 26, 2012 – 11:53 am

See below for code on how to implement a Create New User form in HTML5/VisualForce.

I recently released an HTML5/VisualForce Salesforce.com mobile application recently on the AppExchange for managing Salesforce.com adoption named Adoption Manager.  The purpose is to review users that have not logged in for long periods of time and quickly deactivate them.  It also allows the creation of new users, searching of users, and viewing inactive users.

Below is a screenshot of the Create New User form.  I will walk you through the code to implement something similar.

Salesforce.com mobile development new user

To build this, you need a VisualForce page, an APEX class, and a JavaScript component:

VisualForce:

<apex:page showHeader="false" docType="html-5.0" standardStylesheets="false" cache="true" controller="usermanagerController">
    <html>
        <head>
            <title>Adoption Manager</title>
            <link rel="stylesheet" href="{!URLFOR($Resource.usermanager_jQuery, 'jquery.mobile-1.0.1.min.css')}"/>
            <apex:includeScript value="{!URLFOR($Resource.usermanager_jQuery, 'jquery.min.js')}"/>
            <apex:includeScript value="{!URLFOR($Resource.usermanager_jQuery, 'jquery.mobile-1.0.1.min.js')}"/>
            <apex:includeScript value="{!URLFOR($Resource.usermanager)}"/>
            <apex:includeScript value="{!URLFOR($Resource.forcetk)}"/>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
        </head>
        <body>
            <div data-role="page" data-theme="d" id="newuserpage">
                <div data-role="header">
                    <h1>Create New</h1>
                </div>
                <div data-role="content">
                    <div class="content-primary">
                        <div id="errorMessageNewUserDiv">
                            <span style="color:red;" id="errorMessageNewUser"></span>
                        </div>
                        <div>
                            <span><strong>* All fields are required for user creation</strong></span><br/><br/></div>
                        <form action="javascript:alert('This user has been created');" id="newUserFormForm">
                            <div data-role="fieldcontain">
                                <label for="firstNameForm">First Name:</label>
                                <input type="text" name="firstNameForm" id="firstNameForm" value="" placeholder="First Name" data-mini="true" maxlength="40"/>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="lastNameForm">Last Name:</label>
                                <input type="text" name="lastNameForm" id="lastNameForm" value="" placeholder="Last Name" data-mini="true" maxlength="80"/>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="emailForm">Email (Username):</label>
                                <input type="email" name="emailForm" id="emailForm" value="" placeholder="Email@email.com" data-mini="true" maxlength="80"/>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="userlicenseForm" class="select">User License:</label>
                                <select name="userlicenseForm" id="userlicenseForm" data-mini="true"></select>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="profileForm" class="select">Profile:</label>
                                <select name="profileForm" id="profileForm" data-mini="true"></select>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="roleForm" class="select">Role:</label>
                                <select name="roleForm" id="roleForm" data-mini="true"></select>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="generatePassForm">Generate password and notify user?</label>
                                <select name="generatePassForm" id="generatePassForm" data-role="slider" data-mini="true">
                                    <option value="on">Yes</option>
                                    <option value="off">No</option>
                                </select>
                            </div>
                            <div class="ui-body ui-body-b">
                                <fieldset class="ui-grid-a">
                                    <div class="ui-block-b">
                                        <button type="submit" data-theme="d" data-mini="true">Create</button>
                                    </div>
                                </fieldset>
                            </div>
                        </form>
                    </div>
                </div>
                <div data-role="footer" data-id="foomain" data-position="fixed"></div>
            </div>
        </body>
    </html>
</apex:page>

Notice that the userLicense, Profile, Role dropdown fields are not populated. They will be dynamically populated with JavaScript and using a query in the APEX Controller. Also notice the use of JQuery mobile components (e.g. email form fields, etc.).

Next article will be the APEX controller.

*And let me apologize in advance if any of the code is not the prettiest at the moment. :)


Tags: , , , , , ,
Posted in Force.com User Adoption, HTML5, Salesforce Mobile, Salesforce.com, VisualForce | 1 Comment »

Default values and tracking on Web to Lead forms

Written by ShamrockCRM on July 18, 2009 – 8:36 pm

If you have ever wanted to set default values for certain fields when someone is filling out a Salesforce.com Web2Lead form on your website, you absolutely can.  For example, let’s imagine that you have 5 product pages on your website and you have a contact form on each page.  You could set a field called “Originating Web Form” to the value Product 1 or Product XYZ as seen below.  The user filling out this form would never see this field that is filled out behind the scenes, because it is a hidden field.

This allows you to set fields in Salesforce that might trigger different types of workflow rules or could be used for specific marketing tracking.  This is a great, easy way to prefill in data or track certain behavior.

The line below allows you to specify a hidden value that the user does not see.  This will default a field in Salesforce.com called “Originating Web Form” with the value “Product XYZ Page.”  This will let you know that the user filled in the form on this specific product page.

salesforce.com development web 2 lead


Tags: , , , , , ,
Posted in Salesforce.com, Web Development | 2 Comments »

Adding Google Calendar to your Salesforce Homepage

Written by ShamrockCRM on July 16, 2009 – 8:08 pm

Did you know that you can embed your shared Google Calendar directly on your Salesforce.com home page?  Well, this can easily be done and it is a GREAT feature.

First, go to your Google Calendar page and click the “Settings” link on the left.

Next, select the Calendar you are interested in…in my case, Consulting.

Salesforce.com Gmail Google Calendar

Next, you will see a section where you can receive code to “embed” your calendar on a web page.  Copy the code.

Salesforce.com Google Calendar

Now, go into Salesforce setup and go to the Home Page Component section.

Add another Home Page Component of type “HTML Area.”  Hit the “View in HTML” checkbox and paste in the code.  Save.

Salesforce.com Google Integration

Now, add this home page component into a Salesforce.com Home Page Layout  and take a look at your system wide shared Google Calendar!

Watch Salesforce show you how to do this on video!


Tags: , , , , , ,
Posted in Google, Salesforce.com | Comments Off on Adding Google Calendar to your Salesforce Homepage

Populate Custom Lookup Fields from an S-Control

Written by ShamrockCRM on April 4, 2009 – 12:00 pm

Probably the most common request I receive from clients is to automatically populate a new record with fields.  This is a simple process, usually involving an S-Control and some URL parameters.  It gets a little more complicated, however, when you start wanting to populate lookup fields on the new records.

Warning:  This isn’t documented or supported by Salesforce, and could change at any time.

First, you need the ID of the field in question.  If you’ve already created S-Controls to populate new fields, this probably isn’t new to you.  However, if you haven’t, the easiest way is to navigate to the field in question in Setup. (Create > Objects > Object Name > Field Name, for custom objects).  Then, take the ID from the URL of the custom field, for example:

http://ssl.salesforce.com/00N50000001xxxx

You’ll want to pass this as a URL parameter when creating your new object, with “CF” preceding the ID and “_lkid” appended.  You’ll also want to provide a value for the textbox, as the ID isn’t enough.  So you’ll want to pass something like this for a Contact:

?CF00N50000001xxxx_lkid=00N50000001yyyy&CF00N50000001xxxx=John%20Doe

Basically, it just comes down to knowing to append “_lkid” to the ID of the field you’re passing in with the Salesforce ID, as well as providing a value to display in the textbox on the creation screen.  Hopefully this helps you out!


Tags: , , , , ,
Posted in S-Controls, Salesforce.com | 3 Comments »

Free Salesforce.com S-Control to Dynamically Auto Refresh Dashboards

Written by ShamrockCRM on March 14, 2009 – 3:06 am

Ok, I have received many positive comments about this functionality that I posted about before regarding the auto refreshing of either a home page dashboard or an individual dashboard when a user simply visits the page.

I know that Salesforce offers the ability to schedule dashboards, but this is really to be used in the case of an organization having MANY dashboards and a Salesforce.com Administrator not wanting to schedule hundreds of dashboard refreshes.

Take a look at my original post explaining this Salesforce.com Dashboard Refreshing functionality

I am going to provide this useful code for you to use for free.  This is once again a very simple piece of code, but somewhat useful and unique.

1) Create an S-Control called whatever you’d like.  I called mine “Auto Refresh Dashboard.”

2) Paste in this code:

<code lang="html">&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
function clickButton(){
var thebutton = parent.document.getElementsByName('refresh');
thebutton.item(0).click();
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="clickButton()"&gt;
&lt;/body&gt;
&lt;/html&gt;</code>

3) Create a Home Page Component of type “HTML Area.”
4) Click “Show HTML”
5) Paste in the following code:

<code lang="html">&lt;iframe name="rss_iframe" src="/servlet/servlet.Integration?lid=XXXXXXXXXX&amp;ic=1" width="0%" height="0"&gt;&lt;/iframe&gt;</code>

6) Replace XXXXXXXXXX with the Salesforce.com record ID of the S-Control that you created above.
7) Add this home page component to your home page layout.

Now, the home page dashboard will always automatically refresh when Users visit their home page, preventing confusion by keeping data up to date!

Have fun!


Tags: , , , , , , ,
Posted in dashboards, S-Controls, Salesforce.com | 13 Comments »

Free Salesforce.com Advanced Search Code

Written by ShamrockCRM on March 4, 2009 – 9:41 pm

Ok, I have decided to be kind.  Everyone saw the post about the Advanced Search tool for Salesforce.com already and loved it.  Everyone requested it and I am in a very giving mood.

This is such a great little tool.  You can’t miss out on this little bit of functionality.

This Salesforce.com code is incredibly simple and very easy to install.  This can be used on any edition of Salesforce, including Group, Professional, Enterprise and Unlimited.

1) All you need to do is create a Salesforce Home Page Component.

2) Make this component of type “HTML Area.”

3) Click the checkbox that says “Show HTML.”

4) Add this snippet of HTML into the box:

&lt;script language="JavaScript" type="text/javascript"&gt;
    function submitSearchForm(){
        var searchField = document.getElementById('advsearchfield');
        document.advsrch.action = '/search/SearchResults?searchType=2&amp;sen=0&amp;setLast=1&amp;str=' + searchField.value;
        return true;
    }
&lt;/script&gt;
&lt;form name="advsrch" method="post" onsubmit="return submitSearchForm();"&gt;&lt;input class="searchTextBox" id="advsearchfield" maxlength="80" size="18" name="sbstr"&gt; &lt;input class="btn" value=" Go! " type="submit"&gt;&lt;/form&gt;

5) Add this Home Page Component to your Home Page Layout.

6) Done

Wasn’t that easy?  This will now allow you to have one simple search box, remove the old complicated one and search through all custom fields.  (external identifiers are excellent!)

Let me know if you need help installing this!

tanner@shamrockcrm.com

***Updated 4/1/2009 – Thanks Mike for the Small Improvement to the Code!
***Updated 4/9/2010 – Glenn provided a nifty way to prevent the search box from stealing cursor focus here. He suggests to show an image of a search box and replacing the image on mouseover with the actual search box. You need to take the image from his link above and use the following code below:

&lt;form
  id="searchForm"
  action="/search/SearchResults?searchType=2&amp;sen=0&amp;setLast=1"
  method="post"
  name="advsrch"
  onmousemove="if(getElementById('textBoxImage')) {document.getElementById('textBoxDiv').innerHTML='&lt;input id=\'searchField\' maxlength=\'80\' name=\'sbstr\' size=\'18\' value=\'\' type=\'text\'&gt;&lt;input value=\' Go! \' class=\'btn\' type=\'submit\'&gt;'}"&gt;
  &lt;div id="textBoxDiv"&gt;
    &lt;img id="textBoxImage" src="/resource/1269872073000/TextBoxImage2"&gt;
  &lt;/div&gt;
&lt;/form&gt;

If you are having problems with the Javascript version, use the below plain HTML version

&lt;form action="/search/SearchResults?searchType=2&amp;sen=0&amp;setLast=1" method="post" name="advsrch"&gt;&lt;input class="searchTextBox" maxlength="80" name="sbstr" size="18" value="" type="text"&gt; &lt;input value=" Go! " class="btn" type="submit"&gt;&lt;/form&gt;

Tags: , , , , , , ,
Posted in Business Analysis, S-Controls, Salesforce.com | 42 Comments »

Modifying Salesforce.com Dates Using Javascript

Written by ShamrockCRM on January 27, 2009 – 9:57 pm

CAUTION:  Technical jargon!!! Non-Business Related!!! Only interesting for Salesforce Developers.  :)

I ran across this interesting little problem while creating an orchestration in Cast Iron. I was creating a custom function that would adjust dates forward and back by weeks at a time.

What I found was, my small piece of code worked flawlessly 75% of the time. The 25% of the time would return a calculated date, or error, of “NaN-NaN-NaN.” I could not figure out what was wrong. I tested the code in the browser and everything worked properly.

From further testing and analysis, I determined that the code only broke when the month was July, August, and September or the day was the 7th, 8th, or 9th. I thought that this was very odd.

The code was taking a standard Salesforce date string formatted like “YYYY-MM-DD”, parsing out the text for the year/month/day, and using the parseInt Javascript function to convert the year/month/day into numeric values. I then created a Date object in Javascript and then made the date modifications.

Well, it turns out that parseInt is a bit quirky. If you do parseInt(“06”), this will return the number 6. If you do parseInt(“09”), this will return 0. ZERO?!?! Yes, 0. This is because parseInt will expect the number to be in Octal format if there is a 0 in front. There is no 09 in Octal. This causes the code to return 0, instead of the expected 9. So, when I subtracted 1 from the month to put the month in proper Javascript Date format, my code was inserting -1 as the month, therefore creating an invalid date. This only happened for the 7th, 8th and 9th months.

To resolve this, it was very simple. All you need to do is add “, 10” after the number to parse into an Integer (declaring a Radix) and it will consider this number to be of Base 10, solving your issue.  So, the correct code would be parseInt(“09”, 10).

To learn more about Javascript date modification for Salesforce.com S-Controls, take a look at this W3 Schools link.


Tags: , , , , ,
Posted in Programming, S-Controls, Salesforce.com, Web Development | Comments Off on Modifying Salesforce.com Dates Using Javascript

Salesforce.com S-Control Training Tips

Written by ShamrockCRM on December 22, 2008 – 9:27 pm

Another simple, but effective Salesforce customization with an S-Control.

Records in Salesforce.com are generally very bland and provide no direction as to what a User needs to do or needs to do next in the system.  I created an S-Control that will display whatever kind of HTML text that you would like directly on ANY record in Salesforce.com.  This text can be static or it can be constantly changing.  For example, you can coach a Salesperson along for each Opportunity Stage based on your Organization’s sales process.

You can detect that a User has not added any Products yet to the Opportunity and you can show them a HUGE red sign saying “Hey, it’s time to add a Product.  This is how…”

These can be placed anywhere on the screen, on any time of object, can say anything and can be based on any criteria.

salesforce.com training

Also, Instruct Users about individual fields!  The options are endless.

salesforce.com consulting and training

Obviously, this functionality could really enhance the User experience.  Everything will be a little less confusing, User adoption would increase, Users could be notified of recent functionality changes, their business process can be facilitated based on different criteria.

Contact me if this would interest you.


Tags: , , , , , , , ,
Posted in Business Analysis, Salesforce.com, Training | 1 Comment »