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 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 »