Force.com Development Blueprints

5 (2 reviews total)
By Stephen Moss
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

No one can dispute the sheer power and breadth of the Force.com cloud development platform and its influence on thousands of developers across the world. The staggering number of technologies on offer can cause confusion among developers when it comes to using them to build real-world applications.

Starting with how to develop a Salesforce community, you will begin a whirlwind tour across the Force.com platform, using it to build applications for the e-commerce, CRM, reporting, and mobile subject domains.

Along the way, you will also use a myriad of cutting-edge technologies, including Apex, Visualforce, JavaScript, Twitter Bootstrap, Ruby on Rails, Heroku, and new Salesforce1 technologies such as publisher actions.

Packed with real-world examples and insights gained from implementing solutions for customers in the field, Force.com Development Blueprints will prove an indispensable reference when it comes to building Force.com cloud applications. This book will give you the edge you need to develop Force.com cloud applications that will delight your customers.

Publication date:
May 2014
Publisher
Packt
Pages
350
ISBN
9781782172451

 

Chapter 1. Building and Customizing Your Own Sites

Communities were made generally available in the Salesforce Summer '13 release and are available in Performance, Unlimited, Developer, and Enterprise editions of Salesforce. The purpose of communities is to share information and support collaboration between companies, their customers, and their partners. A Salesforce organization can have multiple communities, each serving a distinct purpose or segment of customers/partners.

A community can be implemented using a Force.com site augmented by Visualforce where required, or by a more traditional HTML/CSS-based site using Site.com.

Communities share a lot in common with the customer and partner portals, which have been a mainstay to connect your Salesforce organization to external customers and partners. Although they are still available, and still supported by Salesforce, it is clear that the future direction of Salesforce is to use (or migrate to) communities in lieu of these portals.

In this chapter, we will be building a Volunteer Community for Force volunteers, a volunteer organization dedicated to providing support services for youth as they reach adolescence and approach adulthood. They already use Force.com to track sponsors, volunteer teams, and volunteer events, but would like to implement a community to connect to their growing network of volunteers.

Note

I strongly encourage that you work through each chapter and build the examples. Feel free to use them as a springboard for your own Force.com application development projects.

 

Determining the community requirements


Some key points to keep in mind when determining the requirements for a Salesforce community are as follows:

  • Who is my target audience?

  • What business processes am I trying to add value to?

  • What Salesforce information do I need to expose to my community?

  • What changes will be required to my organization's security model?

  • Will the standard Salesforce styling and appearance suffice, or do I need the HTML/CSS capabilities of Site.com?

  • Will I need to use Visualforce? In this case, you will probably need to use Force.com sites for your community.

  • Do I need to purchase more Salesforce licenses for my community members?

 

Building a community


The community we are building will be provided by a Site.com site. Site.com is a cloud-based content management system of Salesforce used to build websites and social pages. The community that we are building will provide the following pages:

Community page

Description

Home

This is the welcome page for the community.

Services

This is the description of the support services offered by the Force volunteers.

Who We Are

This is the information about the Force volunteers' organization.

Events

This is the display of current events being volunteered.

Contact Us

This is the contact information and an online form to send a message to Force volunteers. This form will populate a custom object in Force.com.

Volunteers Online

This is an online area for volunteers to collaborate with the volunteer Force employees using Salesforce Chatter.

An overview of the steps that we will follow to build a community is as follows:

  1. Enable the communities.

  2. Create a community.

  3. Configure the custom objects and user profiles for the community.

  4. Add members to the community.

  5. Brand the community.

  6. Create a public community site.

  7. Publish the community.

Note

This chapter assumes that you have enabled the improved setup user interface in Salesforce by going to Customize | User Interface and selecting the Enable Improved Setup User Interface checkbox.

Enabling communities

To use communities in Salesforce, we need to enable them first. To enable communities in Salesforce, log in to your Salesforce Developer edition and complete the following steps:

  1. Go to Setup | Customize | Communities | Settings.

    Tip

    As a shortcut, you can use the Quick Find feature in Setup to search for communities.

  2. Select Enable communities.

  3. At this point, you will be asked for a domain prefix to use for your communities. Enter a domain name prefix that will uniquely identify your communities on Force.com, and click on the Check Availability button. If the domain prefix is already used, enter a different domain prefix and try again.

    It is worth noting at this stage the URL naming conventions that Force.com uses for Developer, Sandbox, and Production instances of Force.com sites. Your unique subdomain is listed first, followed by the edition or environment type, then the instance name, and a Force.com suffix. Sandbox organizations also use the sandbox name as an extra identifier to distinguish them even further. In the following examples, the unique subdomain prefix is volunteerforce, and the sandbox name is vfsandbox. The instance name is na1, and the sandbox instance name is cs1. The URLs for different type of organizations are summarized as follows:

    Type of organization

    URL

    Developer edition

    https://volunteerforce-developer-edition.na1.force.com

    Sandbox

    https://vfsandbox-volunteerforce.cs1.force.com

    Production

    https://volunteerforce.secure.force.com

  4. Once your domain prefix has been accepted, your screen should resemble the following screenshot (except for the domain prefix):

  5. Click on Save and then click on OK in the dialog window that will give you a warning that the changes cannot be undone.

Note

You will also notice a new item titled Manage Communities in the Customize | Communities section of the Setup menu.

Creating the community

To create the Volunteer Community, complete the following steps:

  1. Go to Setup | Customize | Communities | Manage Communities.

  2. Click on the New Community button.

  3. Enter Force Volunteers for the community name.

  4. Enter A Community to connect Force Volunteers with their growing network of volunteers for the Description field to describe the purpose of the community.

  5. The next step is to enter a URL for the community. This will equate to a subdirectory name underneath the domain prefix entered by you, when you enabled the communities and the Salesforce instance that you are running on. For this example, enter volunteers.

  6. Your screen should resemble the following screenshot:

  7. Click on the Create button to create the community.

  8. Click on Close. You will configure the community later.

Configuring custom objects and user profiles

Now that we have created a community, there is some configuration required to ensure that the users can access your community and view data from your Salesforce organization.

The objects that we will be configuring and the relationships between them are depicted in the following diagram:

Customizing the Account object

The Account object will be used to represent a team of volunteers. Each volunteer within a team will be stored as a contact on the volunteer team account.

To configure the Account object, complete the following steps:

  1. Navigate to Setup | Customize | Accounts | Fields.

  2. In the Account Custom Fields and Relationships section, click on the New button.

  3. For the Data Type section, select Lookup Relationship and click on Next.

  4. Select User as the related object in the Related To drop-down list and then click on Next.

  5. Enter Team Leader for the Field Label field.

  6. Press Tab to automatically generate Field Name as Team_Leader.

  7. Enter A Volunteer Force Team Leader in the Description field and click on Next.

  8. Accept the default values of the Field-Level Security for Profile section and click on Next.

  9. Add the field to the Account Layout option only and click on Save, as shown in the following screenshot:

Creating a volunteering event custom object

Your community will require a custom object to display the volunteering events for the community users and volunteers. The steps to create a custom object to display the volunteering events are as follows:

  1. Navigate to Setup | Create | Objects.

  2. Press the New Custom Object button.

  3. Enter VolunteerEvent for the object's Label field.

  4. Enter VolunteerEvents for the Plural Label field.

  5. Enter Events for Volunteers to attend for the Description field to describe the purpose of the custom object.

  6. Enter Event_Name for the Record Name field and leave the Data Type drop-down menu as Text.

  7. Select the following checkboxes:

    • Allow Reports (optional)

    • Allow Activities (optional)

    • Track Field History

    • Add Notes and Attachments related list to default page layout

  8. Assuming that you are using a development environment, ensure that the Deployment Status section is set to Deployed.

  9. Click on the Save button to create the custom object.

Creating volunteering event custom fields

You will now need to configure some custom fields for the VolunteerEvent object. The following steps will create the custom fields:

  1. Navigate to Setup | Create | Objects.

  2. Click on the VolunteerEvent label hyperlink.

  3. Click on the New button in the Custom Fields & Relationships section.

  4. For the Data Type section, select Date/Time and click on Next.

  5. Enter Start/Date Time for the Field Label field.

  6. Enter The date/time that the volunteering event starts for the Description field and click on Next.

  7. Accept the defaults for the Field-Level Security for Profile section and click on Next.

  8. Accept the defaults for the Page Layouts section and select Save & New.

  9. Repeat the steps to create the remaining fields as described in the following table:

    Field type

    Field label description

    Description

    Date/Time

    End Date/Time

    The date/time that the volunteering event ends

    Text Area

    Location

    The location of the volunteering event

    Text Area

    Description

    A description of the volunteering event

    Text Area

    Special Skills

    Any special skills required for the volunteering event; for example, driver's license and first aid

Connecting the Account and VolunteerEvent objects

The final step in configuring our data model is to connect the Account and VolunteerEvent objects together. This will be a simple lookup relationship from the VolunteerEvent object to the Account object to record which team of volunteers will be the primary point of contact for the Volunteer event.

  1. Navigate to Setup | Create | Objects.

  2. Click on the VolunteerEvent label hyperlink.

  3. Click on the New button in the Custom Fields & Relationships section.

  4. For the Data Type section, select Lookup Relationship and click on Next.

  5. Select Account as the related object in the Related To drop-down list and click on Next.

  6. Enter Volunteer Team for the Field Label field.

  7. Enter The Volunteer Team attending the event for the Description field and click on Next.

  8. Accept the defaults for the Field-Level Security for Profile section and click on Next.

  9. Accept the defaults for the Page Layouts section of VolunteerEvent (there should only be one page layout) and click on Next.

  10. Add the custom-related list only to the Account Layout option, as per the following screenshot:

  11. Click on Save. We will now need to add one more custom field to VolunteerEvent to display the volunteer team leader, using the following steps:

    1. Navigate to Setup | Create | Objects | VolunteerEvent.

    2. Click on the New button in the Custom Fields & Relationships section.

    3. For the Data Type section, select Formula and click on Next.

    4. Enter Team Leader for the Field Label field.

    5. Select Text for the Formula Return Type section and click on Next.

    6. Click on the Advanced Formula tab in the formula editor.

    7. Click on the Insert Field button; the Insert Field dialog will be displayed.

    8. Navigate to Volunteer Event > | Volunteer Team > | Team Leader > | First Name and then click on Insert, as shown in the following screenshot:

    9. From the Insert Operator drop-down menu in the formula editor, select the & Concatenate operator. Enter a space between two quotes: " ". Then, select another concatenation operator. Your formula should resemble the following screenshot:

    10. Click on the Insert Field button; the Insert Field dialog will be displayed.

    11. Select Volunteer Event > | Volunteer Team > | Team Leader > | Last Name and click on Insert.

    12. Your formula editor should now resemble the following screenshot:

    13. Enter Team Leader of Volunteer Team in the Description field and click on Next.

    14. Accept the default settings for the Field-Level Security for Profile section and click on Next.

    15. Accept the default values for the Page Layouts section of VolunteerEvent and click on Next.

    16. Your VolunteerEvent custom fields should now resemble the following screenshot:

Configuring the community public user profile

When you create a community, a public user profile is automatically created for any guest (unauthenticated) users who access the community. This profile is cloned from the default guest user profile, but can be customized for your needs. The profile does not exist in the standard user profile maintenance screen, so to configure the profile you will need to complete the following steps:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Force.com hyperlink to access the underlying Force.com site for the community.

  3. Click on the Public Access Settings button to access the Force Volunteers Community profile, as shown in the following screenshot:

  4. Click on the Edit button.

  5. Scroll down to the Standard Object Permissions section.

  6. Select the Read permission option for the Account standard object.

  7. Scroll down to the Custom Object Permissions section.

  8. Select the Read permission option for the VolunteerEvent custom object.

  9. Click on Save.

  10. Scroll to the Custom Field-Level Security section.

  11. Click on the View hyperlink next to VolunteerEvent.

  12. Click on the Edit button.

  13. Make sure that the Description, End Date/Time, Location, and Start Date/Time fields are selected as Visible. There will be system-level fields selected as well and they can't be changed.

  14. Click on the Save button.

  15. Click on the Back to Profile button.

This ensures that any guest users accessing the community can see a list of the volunteering events that we will be constructing later in the chapter.

Creating authenticated community user profiles

To allow volunteers to log into your community, they will need a Salesforce user account and an associated profile. When you enabled the communities in your Salesforce organization, a default set of communities-related profiles was created, as shown in the following screenshot:

Although you can use these default profiles and assign them to the users, it is recommended to clone one of the default profiles and customize it for your needs. This is the approach that we will be taking for the Volunteer Community.

To clone and customize a default community profile, complete the following steps:

  1. Navigate to Setup | Manage Users | Profiles.

  2. Select the Clone link for the Customer Community User profile.

  3. Enter Volunteer Community User for the Profile Name field.

  4. Click on Save. We will now need to configure the Volunteer Community User profile to restrict access to only the objects that volunteers will need, using the following steps:

    1. Navigate to Setup | Manage Users | Profiles.

    2. Select the Edit link for the Volunteer Community User profile.

    3. Scroll down to the Standard Object Permissions section of the Volunteer Community User profile page and ensure that the profile has only a Read access to Accounts and Contacts (deselect all permissions for any other objects).

    4. In the Custom Object Permissions section, ensure that the profile has only a Read access to the VolunteerEvents custom object.

    5. Your object permissions for the profile should resemble the following screenshot:

    6. Click on Save.

    7. Scroll to the custom Field-Level Security section.

    8. Click on the View hyperlink next to VolunteerEvent.

    9. Click on the Edit button.

    10. Make sure that Description, End Date/Time, Location, Special Skills, Start Date/Time, Team Leader, and Volunteer Team are selected as Visible. There will also be system-level fields selected, which can't be changed.

    11. Click on the Save button.

    12. Click on the Back to Profile button.

Configuring Force volunteers Salesforce user profiles

The final profile that we will need to configure is for the Force volunteers Salesforce users. For these users, you can clone almost any standard Salesforce user profile. However, to make the most efficient use of the limited number of licenses available in a development organization, we will use Force.com - App Subscription User as the base license (for full details of the licenses supplied with a Developer edition, refer to https://wiki.developerforce.com/page/Developer_Edition). This profile can be cloned and configured to give sufficient access without using one of the very limited full Salesforce licenses available in a development organization. To configuring Force volunteers Salesforce user profiles, perform the following steps:

  1. Navigate to Setup | Manage Users | Profiles.

  2. Select the Clone link for the Force.com – App Subscription User profile.

  3. Enter Volunteer Force User for the Profile Name field.

  4. Click on Save.

  5. Assuming that you are at the Volunteer Force User profile screen after saving, click on Edit.

  6. Scroll down to the Standard Object Permissions section and ensure that the profile has the Read, Create, Edit, and Delete access to Accounts and Contacts only (deselect all permissions for any other objects).

  7. In the Custom Object Permissions section, ensure that the profile has the Read, Create, Edit, and Delete access to the VolunteerEvents custom object.

  8. Your object permissions for the profile should resemble the following screenshot:

  9. Click on Save.

Configuring Chatter

Volunteer Force has decided to use Salesforce Chatter as a key component of their Volunteer Community. It is envisaged that the collaborative features of Chatter will form a natural fit with those volunteers who are naturally inclined to form self-organizing teams for volunteering events.

Note

It is assumed in this section that you have already activated Chatter for your Salesforce organization. Note that Chatter is automatically enabled when a developer organization is created.

Enabling Chatter feeds for VolunteerEvent

To enable community users to subscribe to a volunteer event and to collaborate and receive notifications, we will need to activate Chatter feed tracking for the VolunteerEvent object.

  1. Navigate to Setup | Customize | Chatter | Feed Tracking.

  2. In the list of objects being tracked, select VolunteerEvent.

  3. Select the Enable Feed Tracking checkbox.

  4. In the list of fields available to be tracked, select Description, Event Name, Start Date/Time, End Date/Time, Location, and Special Skills.

  5. Click on Save.

  6. Your Chatter feed tracking for VolunteerEvent should now resemble the following screenshot:

Creating a volunteer Force.com application

The final step to perform before working on the Volunteer Community site is to create a Force.com custom application to tie all of the components of the community together into a cohesive unit. This will provide a consistent interface and a set of Salesforce tabs for volunteer Force employees.

Creating the VolunteerEvent custom object tab

The first step in creating a custom application is to create a custom object tab for the VolunteerEvent custom object. The steps to do this are as follows:

  1. Navigate to Setup | Create | Tabs.

  2. Select the New button in the Custom Object Tabs section.

  3. In the Object drop-down menu, select Volunteer Event.

  4. Select the Tab Style lookup icon and select a style from the Tab Style dialog (if it is unused, a good match is the tab titled People).

  5. Enter Events for Volunteers to attend in the Description field to describe the purpose of the tab and click on Next.

  6. Accept the default value to add the tab to the user profiles and click on Next.

  7. Deselect all of the checkboxes (a shortcut is to use the Include Tab checkbox, which will deselect all checkboxes) in the next screen, so that the tab will not be included in any application, and click on Save.

Creating a custom application

Now that VolunteerEvent has a custom object tab, we can go ahead and create the custom application by performing the following steps:

  1. Navigate to Setup | Create | Apps.

  2. Select the New button to create a new application.

  3. Ensure that Custom app is selected for the application type and click on Next.

  4. Enter Volunteers for the App Label field.

  5. Enter Collaborative Community for Volunteer Force Members in the Description field to describe the purpose of the community and click on Next.

  6. Accept the default application logo and click on Next.

  7. Move Chatter, Accounts, and VolunteerEvents from the Available Tabs list to the Selected Tabs list by highlighting the relevant tab and clicking on the Add button. Leave the option for Home as Default Landing Tab and click on Next.

  8. Assign the application as Visible and Default for the Volunteer Community User and Volunteer Force User profiles, and Visible for the System Administrator profile. All other profiles should not have access to the application.

  9. Click on Save.

Progress check – what have we achieved so far?

Note

If you want to keep progressing with building the community, feel free to skip this section and continue to the Adding community members section.

You might be questioning what you have been doing up to this point. Aren't we supposed to be working with communities? It is worth remembering that a community is really an extension of a Force.com application. You have actually successfully built a Force.com application that can now serve as the basis for your Volunteer Community.

To see your application in action, create and activate a user account with the Volunteer Force User profile.

When you log in as a volunteer Force user, you can see the application you have built, as shown in the following screenshot:

It is now possible to perform the following functions from within the application:

  • Record the volunteer teams using the Accounts object

  • Associate a team leader (via the User object) with a volunteer team

  • Record the volunteers against a volunteer team (as Contacts)

  • Record a volunteer event using the VolunteerEvent custom object

  • Associate a volunteer event with a volunteer team

Congratulations! You are now in a position to build out the rest of the Volunteer Community.

Adding community members

Now, we will add members to the Volunteer Community. This can be a set of profiles or permission sets. Adding members will enable them to log into the community and collaborate on the volunteer events together. The following steps will guide you to add members to the Volunteer Community:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Edit link in the Action column for the Force Volunteers Community option.

  3. The Community Settings dialog is displayed, as shown in the following screenshot:

  4. Click on the Members button.

  5. In the Select Profiles section of the window, select Internal in the Search drop-down list.

  6. Move the Volunteer Force User profile from the Available Profiles list to the Selected Profiles list by highlighting it and clicking on the Add button, as shown in the following screenshot:

  7. In the Select Profiles section of the window, select Portal in the Search drop-down list.

  8. Move the Volunteer Community User profile from the Available Profiles list to the Selected Profiles list by highlighting it and clicking on the Add button.

  9. The community members list should now resemble the following screenshot:

  10. Click on Save.

Note

The addition of members to a community runs as a background process. You will receive an e-mail notification entitled Force Volunteers: Processing Complete when the processing is complete.

Branding the community

Communities provide a declarative interface to define the following elements:

Branding element

Description

Header

This specifies a default header for the pages in your community. For best results, it is recommended that the header be a publicly-accessible HTML document stored using the Documents tab.

Footer

This specifies a default footer for the pages in your community. For best results, it is recommended that the footer be a publicly-accessible HTML document stored using the Documents tab.

Color scheme

This selects a default color scheme for your community. This can be a predefined color palette from the Select color scheme drop-down list, or a custom color palette defined using HTML color notation for each color, for example, #FFFFFF for white color.

For the Volunteer Community, we do not need to specify a default header and footer as we will be building the community pages with Site.com. Make the following minor adjustments to the community branding:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Edit link in the Action column for the Force Volunteers Community.

  3. The Community Settings dialog is displayed.

  4. Click on the Branding button to display the Branding Settings for the community.

  5. Set the background for each page to white by entering #FFFFFF into the Page Background field.

  6. Assuming that you are using the default color palette, the Colors section of the dialog should resemble the following screenshot:

  7. Click on Save.

Note

Any changes that you make to the community branding declaratively are automatically propagated to Site.com in the community site template and style sheet.

Specifying Site.com for the community

Force.com sites are a feature of Salesforce that allow you to create public websites and applications that are directly integrated with a Salesforce organization. As mentioned earlier, Site.com is designed as a content management system and provides more fine-grained control over the HTML and CSS of your site.

Force.com sites are available in Developer, Enterprise, Performance, and Unlimited editions of Salesforce. Visualforce is available in Contact Manager, Group, Professional, Enterprise, Unlimited, Performance, and Developer editions of Salesforce. However, if you wish to use Apex, you will need the Performance, Unlimited, Developer, or Enterprise edition of Salesforce (Apex is also available on Database.com).

Site.com is purchased as a separate license for Enterprise, Performance, and Unlimited Salesforce editions (a limited Site.com license for use only with communities is available in a Developer edition).

Note

For more information about Site.com and links to resources and recommended learning path, refer to https://wiki.developerforce.com/page/Site.com.

By default, Salesforce will use a standard Force.com site for the community. This allows the website to be configured in a declarative fashion by specifying the Salesforce tabs that will be made available to the community users. This can then be customized or extended as required by using Visualforce and Apex.

The second option to define a community website is to use Site.com. This is better suited to build a more customized interface using HTML and CSS as the key components, with a limited set of data access functionality.

For the Volunteer Community, we will be using Site.com to provide a more customized interface for the community website. Our data access requirements can also be supported by Site.com out of the box, without the need to use Visualforce or Apex.

To define a Site.com website for the Volunteer Community, the following steps will need to be completed:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Edit link in the Action column for the Force Volunteers Community.

  3. The Community Settings dialog is displayed.

  4. Click on the Tabs & Pages button.

  5. The drop-down list at the top of the Tabs & Pages dialog will be set to Use Salesforce.com tabs, by default.

  6. Select Use Site.com to create custom community pages from the drop-down list to specify that you will be using Site.com.

  7. The Tabs & Pages dialog should now resemble the following screenshot:

  8. Click on Save and then on Close to dismiss the Community Settings dialog.

Creating a public community site

Now, we get to the fun part! We are going to use Site.com to build the custom user interface for the Volunteer Community.

A quick tour of the Site.com community

When you selected Site.com to build the pages for the community, Salesforce automatically created a skeleton website with minimal content.

To open your Site.com community website, complete the following steps:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Site.com link in the Custom Pages column for the Force Volunteers Community option.

  3. If this is the first time you are using Site.com, you will be presented with the Getting Started with Site.com Studio introduction window. Select the Don't show this again checkbox, and click on the x icon in the top-right corner of the window.

  4. You will now be presented with the Site.com landing page for your community, as shown in the following screenshot:

As seen in the screenshot, the Site Pages section displays the pages for your site. Currently, this is empty as you haven't created any pages yet.

Clicking on the Page Templates section will display the current list of templates that can be used for the pages on your site. Your screen should look like the following screenshot:

Salesforce has automatically generated the Community Template page for you, based on your selections when branding the community.

Clicking on the Style Sheets section will display the current list of style sheets associated with your site. Your screen should look like the following screenshot:

Salesforce has automatically generated the CommunityBranding style sheet for you, again based on your selections when branding the community. The default SiteStyleSheet is also generated by Salesforce, and supplies a base level of styling for site elements, such as menus, tables, and forms.

The Assets section is where you upload any images, scripts, videos, or documents that will be used by your site. Currently, this is empty as we haven't uploaded anything yet.

Clicking on the Widgets section will display the current list of reusable components that can be used for the pages on your site. Your screen should look like the following screenshot:

Salesforce has automatically generated the Header and Footer widgets for you, also based on your selections when branding the community.

Customizing the site header and footer

The initial items that we will need to customize for the community site are the header and footer.

Customizing the header

The following sections detail the steps required to customize the community header.

Importing the community logo

The steps to import the community logo are as follows:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Site.com link in the Custom Pages column for the Force Volunteers Community option.

  3. On the Overview tab, hover over Assets and click on Import.

  4. In the Import an Asset dialog, click on the Browse... button.

  5. In the file picker dialog, locate the image Force Volunteers Logo.png from the code download for this chapter and click on Open.

  6. Leave the Overwrite existing files checkbox selected and click on Import.

  7. Once the file has been uploaded, you will see a success message. At this point, you can click on Browse... again to import another asset if required. We don't have any more assets to upload at this point, so click on the x sign in the top-right corner of the window to close the dialog.

  8. The ForceVolunteersLogo.png file will now appear in the Assets list for the site.

Adding the community logo to the header

The steps to add the community logo to the header are as follows:

  1. On the Overview tab, click on Widgets.

  2. In the list of widgets, click on Header.

  3. Ensure that the Page Structure tab is selected, as shown in the following screenshot:

  4. In the Page Structure tab, there will be a page element of type Custom Code underneath the Widget section. This contains any header information that has been saved as part of the community branding. You can leave this page element as it is since you didn't enter any header information when branding the community.

    Tip

    If you subsequently enter any header information into the community branding, it will appear in the Custom Code element. You may wish to delete the Custom Code page element to prevent this from happening. To restore the default header at a later stage, you will need to readd a Custom Code page element with the following code:

    {!Network.header}
  5. Select Widget, click on the gear icon, and select Add Page Elements. From the list of page elements, select Image.

  6. In the Add an Image dialog, select ForceVolunteersLogo.png. A preview of the logo will be displayed. Click on Apply.

Adding the site navigation menu

To add the site navigation menu, perform the following steps:

  1. Select Widget, click on the gear icon, and select Add Page Elements. From the list of page elements, select Panel. Close the dialog.

  2. Using the Properties pane on the right of the screen, type navigation in the Class Name field, and press Enter.

  3. Select the div.navigation panel, click on the gear icon, and select Add Page Elements, as shown in the following screenshot. From the list of page elements, select Menu. Close the dialog.

  4. From the Properties pane, expand the THEME section and select Default for the menu Theme Name.

    Note

    At this point the menu is blank. The menu will be built automatically from the pages in the site.

  5. Your Header widget should now resemble the following screenshot:

  6. Close the Header tab.

Customizing the footer

To customize the footer, perform the following steps:

  1. Assuming that you are still in Site.com, in the list of widgets, click on Footer.

  2. Ensure that the Page Structure tab is selected.

  3. In the Page Structure window, there will be a page element of type Custom Code underneath the Widget section. This contains any footer information that has been saved as part of the community branding. You can leave this page element as it is since you didn't enter any footer information when branding the community.

    Tip

    If you subsequently enter any footer information into the community branding, it will appear in the Custom Code element. You may wish to delete the Custom Code page element to prevent this from happening. To restore the default footer at a later stage, you will need to readd a Custom Code page element with the following code:

    {!Network.footer}
  4. Select Widget, click on the gear icon, and select Add Page Elements. From the list of page elements, select Content Block.

  5. Select the content block, click on the gear icon, and select Edit.

  6. Delete the existing text.

  7. From the Insert Symbol drop-down menu (the drop-down menu on the right-hand side of the Add or Edit Media drop-down list in the top toolbar), select the copyright symbol.

  8. In the content block, type Copyright 2014 Volunteer Force. All rights reserved. and click on Save, as shown in the following screenshot:

  9. Close the Footer tab.

Adding some style to the community site

Currently, your community site is using a base collection of styling information determined by the CommunityBranding style sheet and the default SiteStyleSheet. You will now upload an additional style sheet to add some more CSS styling information using the following steps:

  1. Navigate to Setup | Build | Customize | Communities | Manage Communities.

  2. Click on the Site.com link in the Custom Pages column for the Force Volunteers Community option.

  3. Click on Style Sheets to display the list of style sheets currently available.

  4. Click on the Import... button at the top of the page, underneath the Overview tab.

  5. In the Import an Asset dialog, click on the Browse... button.

  6. In the file picker dialog, locate the force.css style sheet from the code download for this chapter and click on Open.

  7. Leave the Overwrite existing files and Convert CSS files into style sheets checkboxes selected and click on Import.

  8. Once the file has been uploaded, you will see a success message. At this point, you can click on Browse... again to import another asset if required. We don't have any more assets to upload at this point, so click on the x in the top-right corner of the window to close the dialog.

  9. Click on Page Templates to display the list of templates for community pages.

  10. In the list of page templates, select Community Template, click on the gear icon, and select Edit.

  11. In the Properties pane, expand the STYLE SHEETS section, as shown in the following screenshot:

  12. Click on the + button underneath the Style Sheets list.

  13. A drop-down list containing the style sheets loaded into the community is displayed. Select /force.css and click on the + button next to the drop-down list (the highlighted button in the following screenshot):

  14. The styles from force.css will now be applied to the Community Template.

  15. Close the Community Template tab.

Creating the static site pages

The building of the site infrastructure for the community is now complete. We are now in a position to build the pages of the site itself. The following steps are to be completed to create the static site pages:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Site.com link in the Custom Pages column for the Force Volunteers Community option.

  3. Click on Site Pages to display the list of pages for the community. At this stage, it should be blank.

  4. Click on the New drop-down button at the top of the list and select Site Page.

  5. In the Create a Site Page dialog, enter Page name as Home.

  6. Ensure that Community Template is selected in the Page templates list.

  7. Click on Create.

  8. The Home page will be created and displayed in the Site.com editor.

  9. Close the Home page.

  10. Repeat steps 4 to 9 to create the following pages:

    • Services

    • Who We Are

    • Events

    • Contact Us

    • Volunteers

Adding text to static pages

To add text to static pages, perform the following steps:

  1. Click on Site Pages to display the list of pages for the community.

  2. Hover over Home, click on the gear icon, and select Edit.

  3. Select the div#content.brandPrimaryBrd page element, click on the gear icon, and select Override Parent Content. Click on OK to confirm your wish to override inherited content.

  4. Select the div#content.brandPrimaryBrd page element, click on the gear icon, and select Add Page Elements.

  5. Click on Panel in the Add Page Elements dialog and close it.

  6. Select the div page element you have just created, click on the gear icon, and select Add Page Elements.

  7. Click on Content Block in the Add Page Elements dialog and close it.

  8. Select the content block you have just created, click on the gear icon, and select Edit.

  9. Delete the existing text.

  10. Currently, Paragraph is the selected style for the text. Click on the style drop-down menu where Paragraph is selected and select Heading 1.

  11. Type Welcome to Force Volunteers! and press Enter.

  12. Click on the Style drop-down menu and select Paragraph.

  13. Type We are an organization dedicated to supporting young people and helping them make positive life choices.

  14. Click on Save.

  15. Click on Preview Page and admire your home page, as shown in the following screenshot:

  16. Repeat steps 1 to 15 and add static text to the following pages as per the following table:

    Page

    Heading

    Paragraph text

    Services

    Services We Offer

    We offer a range of support services encompassing Schools, Universities, Festivals and Events.

    Who We Are

    Who We Are

    Our founders recognized the need for an organization to support young people at a very vulnerable stage of their lives. We now offer a comprehensive range of programs aimed at helping young people make positive life choices.

    Events

    Events

    A list of volunteer events we will be involved in.

    Contact Us

    Contact Us

    For any enquiries, contact us at [email protected]

    Volunteers

    Volunteers Online

    Welcome to our Volunteers Online Page.

Note

The e-mail address link for the Contact Us page will be automatically generated by Site.com.

Creating a data access page

Note

Before creating the volunteer events' data access page, take some time to create some sample volunteer teams, volunteers, and volunteer events in your Salesforce development organization.

It will be beneficial to display a list of volunteer events on the Events page. This will require us to utilize the Salesforce data access functionality built into Site.com. Fortunately, for us, Salesforce has gone to great lengths to make the process as painless as possible.

To add a list of events to the Events page, complete the following steps:

  1. Click on Site Pages to display the list of pages for the community.

  2. Hover over Events, click on the gear icon, and select Edit.

  3. Select the div#content.brandPrimaryBrd page element, click on the gear icon, and select Add Page Elements.

  4. Click on Panel in the Add Page Elements dialog and close it.

  5. In the Properties pane, give the div page element an ID of EventList.

  6. Click on the div#EventList element, click on the gear icon, and select Add Page Elements.

  7. From the DATA section of page elements, select Data Table. The Create Data Table wizard will open.

  8. In the Choose a Salesforce object drop-down menu, choose VolunteerEvent. You will notice that the Connection Preview section is populated with data from VolunteerEvent.

  9. We don't want to display events from the past, so we will need to filter the data to display events with a date on or after the current date. Expand the FILTERS section.

  10. From the Field drop-down list, select Start Date/Time.

  11. From the Operator drop-down list, select Greater than or equal to.

  12. From the Source drop-down list, select Global Property.

  13. From the Value drop-down list, select Current date.

  14. We will be sorting the events by Start/Date Time in an ascending order. Expand the SORTING section.

  15. In the Field drop-down list, select Start Date/Time.

  16. In the Sort Order drop-down list, select Ascending.

  17. Your filtering and sorting criteria should resemble the following screenshot:

  18. Click on Next.

  19. You will now need to select the data fields to be displayed in the table. From the Available Fields list, select Start Date/Time and move it across to the Selected Fields list by clicking on the > button.

  20. Move the End Date/Time, Event Name, Description, and Location fields across to the Selected Fields list by pressing the > button.

  21. Click on the Reload Preview button to see a preview of your table.

  22. When you are satisfied with the results, click on Save.

  23. The events list will now appear on your Events page. At this point, you can select Preview Page to see your events list in action.

Customizing the events list

Congratulations! You now have a list of events on your site.

However, there are a few improvements that we can make to the events list, which are listed as follows:

  • Fix the styling and placement of the events list to match the rest of the site

  • Format the Start Date/Time and End Date/Time columns to display the dates and times correctly

  • Add paging support to limit the number of events listed on a page and provide a mechanism to scroll through them

Styling the events list

To correct the styling and placement of the events list, complete the following steps:

  1. Open the Events page from the Site Pages list.

  2. Select the div#EventsList page element.

  3. Select the Style pane (next to the Properties pane).

  4. Expand the DIMENSIONS section.

  5. Scroll down to the Padding section and enter 15 for the Top padding value.

  6. From the drop-down menu, next to the Top textbox, select pixels.

  7. Click on the Overview tab and select Style Sheets.

  8. Click on SiteStyleSheet to open it.

  9. From the list of CSS styles on the left-hand side, find the .Tabletheme thead th style and select it.

  10. In the CSS code box to the right-hand side of the style, add the following line of CSS code, as shown in the following screenshot:

    font-size:12px;
  11. Click on Save.

  12. From the list of CSS styles, find the .Tabletheme tbody tr td style and select it.

  13. In the CSS code box to the right-hand side of the style, change the border-color entry to black, so the line reads the following code:

    border-color:black;
  14. Finally, add the following line of CSS code, as shown in the following screenshot:

    font-size:12px;
  15. Click on Save and close SiteStyleSheet.

Fixing the Date/Time columns

Now, we need to fix the formatting of the Start Date/Time and End Date/Time columns in the events list. To reformat the columns, complete the following steps:

  1. Open the Events page from the Site Pages list.

  2. Double-click on the Start_Date_Time__c table cell. The Edit Column dialog will be displayed.

  3. From the Display the field value as: drop-down list, select Formatted Text.

  4. From the Format drop-down list, select Short date and time.

  5. Click on Save.

  6. Perform the same steps for the End_Date_Time__c table cell.

Add paging support to the events list

The final step in customizing the events list is to add paging support to the table. This will allow a user to step through the list of events. To add paging support, complete the following steps:

  1. Select the Default View option of the Data Table.Tabletheme page element, click on the gear icon and select Edit, as shown in the following screenshot:

  2. Expand the LIMITS section and enter 5 for the Results per page field.

  3. Click on Next and then on Save.

  4. Select the div#EventsList page element from the Page Structure tab, click on the gear icon, and select Add Page Elements.

  5. Select Panel. In the Properties pane, give the panel an ID of ButtonRow.

  6. Select the Style pane (next to the Properties pane).

  7. Expand the DIMENSIONS section.

  8. Scroll down to the Padding section and enter 15 for the Top padding value.

  9. From the drop-down menu next to the Top textbox, select pixels.

Adding the paging buttons

The steps to add the paging buttons are as follows:

  1. Select the div#ButtonRow page element, click on the gear icon, select Add Row and Column Panels, and then select Add Row and Column Panels from the Inside the panel... section.

  2. Select a 1 x 2 grid (two columns in the first row).

  3. Select the first div page element underneath div#ButtonRow and give it an ID of PrevButton in the Properties pane.

  4. In the Style pane, expand the DIMENSIONS section, and set the Width field to 100 pixels.

  5. Select the second div page element underneath div#ButtonRow and give it an ID of NextButton in the Properties pane.

  6. In the Style pane, expand the DIMENSIONS section, and set the Width field to 100 pixels.

  7. Select the div#PrevButton page element, click on the gear icon, select Add Page Elements, and then select Button. Close the dialog.

  8. In the Properties pane, change the name to Previous Page.

  9. In the Events pane, select the click event.

  10. Click on the + button underneath the Actions list.

  11. In the Select an Action drop-down list, select Previous Page.

  12. In the Target Element drop-down list, ensure that VolunteerEvent__c Data Table is selected (it should be the only element in the list).

  13. Click on Save.

  14. Select the div#NextButton page element, click on the gear icon, select Add Page Elements, and then select Button. Close the dialog.

  15. In the Properties pane, change the name to Next Page.

  16. In the Events pane, select the click event.

  17. Click on the + button underneath the Actions list.

  18. In the Select an Action drop-down list, select Next Page.

  19. In the Target Element drop-down list, ensure that VolunteerEvent__c Data Table is selected (it should be the only element in the list).

  20. Click on Save.

Catering for the end of the event list

To cater for the end of the event list, perform the following steps:

  1. Select the Content Block option underneath the No Data View page element of Data Table.Tabletheme, click on the gear icon, and then select Edit.

  2. Replace the text No Data Found with No More Events....

  3. Replace the text There is no data to display for this query with There are no more Events to display at this time. Please check back later., as shown in the following screenshot:

  4. Click on Save.

  5. Your Events page should now resemble the following screenshot:

Securing the volunteers page

The build of the Volunteer Community is nearly complete. Our last task is to secure the volunteers page. This is achieved by activating Authorization for the site.

There are three options available when activating authorization in Site.com, as shown in the following screenshot:

We want all pages to be available for public access, except the volunteers page. In this case, the custom authorization setting suits our purpose.

Complete the following steps to activate authorization for the community site:

  1. On the Overview tab of the site, expand the Site Configuration section, and select Authorization.

  2. The default setting is No Authorization. To change this, select Custom from the Site Setting drop-down list.

By default, all site pages are still publicly available when enabling the Custom authorization. We will need to manually configure the authorization for the volunteers page by completing the following steps:

  1. On the Overview tab of the site, select Site Pages.

  2. Select the Volunteers page, click on the gear icon, and select the Requires Authorization checkbox.

  3. A padlock icon will now appear next to the Volunteers page name indicating that it is now secured. This is illustrated in the following screenshot:

To personalize the Volunteers page, we will now add a Chatter feed for the logged in user:

  1. Double-click on the Volunteers page to open it for editing.

  2. Select the div#content.brandPrimaryBrd page element, click on the gear icon, and then select Add Page Elements.

  3. Click on Panel in the Add Page Elements dialog and close it.

  4. In the Properties pane, give the div page element an ID of VolunteerChatter.

  5. Select the Style pane (next to the Properties pane).

  6. Expand the DIMENSIONS section.

  7. Scroll down to the Padding section and enter 15 for the Top padding value.

  8. From the drop-down list, next to the Top textbox, select pixels.

  9. Click on the div#VolunteerChatter element, then on the gear icon, and select Add Page Elements.

  10. From the WIDGETS section of the dialog, select the News Feed widget.

  11. Click on x to close the Add Page Elements dialog.

  12. Click on Preview Page to see your Volunteers page with a personalized Chatter feed for the currently logged in user, as illustrated in the following screenshot:

Note

The first time you display the Volunteers page after it has been secured, you may be prompted to log in. If so, make sure that you select the link to log in as Member Of your Salesforce Organization.

Congratulations! The build of the community is now complete!

Creating the Volunteer users

To create community users, they must first be added as contacts against a Salesforce account. To add a community user, complete the following steps:

  1. Open the contact record for the community user in Salesforce.

  2. Click on Manage External User and select Enable Customer User.

  3. The New User screen will now be displayed.

  4. Complete the user details for the user (you can use any data you like) and be sure that you select Volunteer Community User for the profile (assuming the profile has been created previously and is active).

  5. Ensure that Customer Community is selected for the User License section.

  6. Click on Save.

Note

In order to create community users, the logged in user must be assigned to any role, or else the Portal Account Owner Has No Role error will be displayed. Also, the community user will not receive an activation e-mail until the community is live.

Going live

Now, we are ready to publish the community on Salesforce. Once the community has been published, it will be available to all users with the correct access privileges. In our case, this will be public (anonymous) users, and users with a profile of Volunteer Force User or Volunteer Community User.

To publish the Volunteer Force community, complete the following steps:

  1. Navigate to Setup | Customize | Communities | Manage Communities.

  2. Click on the Edit link in the Action column for the Force Volunteers Community option.

  3. Click on the green button labeled Publish.

  4. A dialog box will be displayed informing you that publishing the community will make it available to all members, and that all members will be sent a welcome e-mail. Click on OK.

  5. A success message will be displayed and the community status will change to Published, as shown in the following screenshot:

  6. The community users will also receive a welcome e-mail, as shown in the following screenshot:

Congratulations! Your community is now live!

Note

To view the licensing options for Salesforce communities, visit https://help.salesforce.com/HTViewHelpDoc?id=users_license_types_communities.htm&language=en_US.

 

Summary


In this chapter, we built a fully functional Salesforce community that is powered by Site.com.

First, we enabled Salesforce communities for our development organization. We then proceeded to create a new community. From there, we configured the Force.com objects and user profiles required for the community, before adding some community members. With the building blocks in place, we branded the community and built the public-facing site with Site.com. Finally, we integrated the community site to our Force.com data, secured the community, and published it.

Some possible enhancements that you could make to the community are as follows:

  • Add a status field to the VolunteerEvent object, with statuses such as Draft and Published. Use the data filtering capabilities of Site.com to only display the published events.

  • Publish a form for prospective volunteers to register their interest and capture this as a lead in Salesforce.

  • Customize the community login page that is displayed when a volunteer logs in.

About the Author

  • Stephen Moss

    Stephen Moss is a Salesforce.com-certified administrator and Force.com developer.

    After his first brush with computing on Apple II, he was hooked to it and started programming on a Commodore 64 computer, back in the 1980s, to automate his math homework.

    He has over 20 years' experience in the IT industry in a multitude of roles, ranging across application domains as diverse as CRM, GIS, manufacturing, broadcast engineering, billing, field services, IVR speech recognition, and call center management systems.

    In addition to cloud computing, he also has a keen interest in the SOA/BPM systems (he is an Oracle BPM Suite Certified Implementation Specialist) and mobile device development (he even has an original PalmPilot in his attic somewhere!).

    He is currently consulting with a range of clients, helping them embrace cloud computing and digitizing their businesses for the 21st century.

    Browse publications by this author

Latest Reviews

(2 reviews total)
super easy, fast service and packed securely
Excellent
Book Title
Unlock this book and the full library for only $5/m
Access now