Site.com With Communities In Salesforce

           This document is to provide clear view of how to customize site.com to use in community. This document is well prepared from overview and basics of site.com to publishing pages to community.

1.     Introduction to Site.com

Site.com is a Web content management system (CMS) that makes it easy to build dynamic, data-driven Web pages quickly, edit content in real time, and manage wer websites. Site administrators and designers can create and style Web pages, and add features such as navigation menus, images, and text areas using drag-and-drop page elements, while ensuring the site's pages match the look and feel of the company's brand.

Navigation :  1) Setup -> Go to site.com app at top right corner -> click on site.com tab.

   2) Setup -> Type All Communities -> Click on All Communities -> Click Manage          for the community to setup site.com -> Expand Administration -> Scroll down            and Click on Pages -> Click on Go to Site.com.

1.1. Overview

After redirecting to site.com we will be able to see the page like below.

Now we will see the functionalities one by one.

Number	Name	Functionality
1	Overview Tab	Tab is used to show the current page in site.com. Overview is a home page for site.com. When we click on any other items from the left menu it will appear in a separate tab.
2	Import	Import button is used to import any files such as images, videos, documents. The maximum import file size is 50 MB, but we can import a .zip file of up to 200 MB if we unzip it during import.
3	New	“New” is used to add a new page to our site.com. We can either create a site.com page by clicking on “Site Page” or we can add custom links to create a page by clicking on “Site Map Link”. We must add http:// or https:// before url of the link inorder to see the page.
4	Site Pages	Site Pages Navigation is used to Create site pages, open and edit pages, access page options, create site map links, and organize the site map. We can also switch between the default site map view and the list view .
5	Page Templates	Page Templates is used to Create page templates to base wer site pages on, open and edit existing templates, and access template options. This is like a “Master Page” in DotNet.
6	Style Sheets	Style Sheets is used to Edit the site’s style sheet or create new style sheets
7	Assets	Assets is used to import and manage files such as images, documents, videos and scripts
8	Widgets	Widgets is used to build custom widgets that are reusable throughout the site. For ex, we can group multiple images and create a widget that widget can be placed anywhere in the site.
9	Trash Can	Trash can is used to retrieve deleted items. When we delete a page, template, stylesheet, or asset, it goes into the trash can. Deleted items remain in the trash can indefinitely. Retrieved items are restored to their original location. If the original location no longer exists, they are restored to the top-level root directory
10	Change History	Change History is used to view information about recently published files with descriptions.
11	Site Configuration	Site Configuration is used to configure site properties, add IP restrictions, create URL redirects, manage domain information, manage user roles, and add and manage site languages
12	Publish Changes	Publish Changes is used to Publish the recent changes made in the site. Changes will appear in the site when only those changes are published.
13	Preview	Preview is used to Preview the Site.
14		This is used to duplicate or export the site, overwrite the site with a version from sandbox, or create a new site.

2. Creating a Site Page Template

Page Template is a Master Page for our Site. Master Page should contain Header, Content and Footer. Site.com Allow us to choose different templates.

1.       Click on “New Page Template” on the top.

2.       Choose existing template to modify the page template or create new one by clicking on Lawets. If we click on lawets then site.com suggest some templates to create our own page template.

3.       After Choosing the lawet template we can also choose lawet mode that will give extra functionality to our site. If we choose “Full Width” then wer site will appear in 100% width of windows. If we choose “Fixed Width” the wer site will appear in a specified width(custom width for site).

4.       Click on Create(For below page template creation “Blank Page is choosed”).

5.       Every Master Page should have Header, Content and Footer. So we will start by adding header, content and footer.  Before we going to create a template we need to know the page elements and its functionalities. Click on Actions

                          -> Add Page Element -> Now we will be able to see all the Elements that can be                                  added for the Page. Below is the list of page elements and its functionalities.

Page Elements Name	Description
Content Block	It contains text, images, media and hyperlinks. We can add  all of the above to our page using “content block”.
Custom Code	“Custom Code” lets us write our own custom markup language like HTML, CSS and Javascript. If any of the element is not available in site.com for our requirement then we can add custom code to create element.
Image	We can add “Images” that are present in assets or we can upload and use directly to our page
Breadcrumb	A “breadcrumb” is a type of secondary navigation scheme that reveals the user's location in a website or Web application.
Menu	Creates a menu that lets users navigate through the pages of our site.
Panel	Adds structure to the page and lets we group other page elements together. Other word for Panel is “DIV” in HTML.
Button	Adds a button to the page. We can use the actions in the Events pane to add functionality to the button.
Form	Lets us to create web-to-lead forms or gather customer feedback, and submit the data to Salesforce objects.
Input Fields	Provides several field types to add to forms or pages. When added to a form, binds to fields in the form’s object.
Data Element	Data Element must be contained in a data repeater. Binds to a field in the data repeater’s object and acts as a placeholder that shows the content of a specified field for the current record
Data Function	Connects to a standard or custom Salesforce object, performs calculations on the returned results, and displays the calculation on the page.
Data Repeater	Connects to a Salesforce object and returns a dataset based on filters that we specify. Combines with data elements or custom code page elements to display the results on the page
Data Table	Connects to a standard or custom Salesforce object, retrieves a data set based on the filter criteria that we specify, and displays one or more record as rows in the table.

To add Master Page(Header, Content and Footer) we need to use 3 “Panels”(div).

6.        Click on Page Actions from left menu

                          -> Add Page Elements -> Drag and Drop Panel for Header from the elements                                      window. Continue the same method for Content Div and Footer Div. We can also do                            the custom height and width css by after pressing the panel.

7.       To write custom css for Header Panel(div)  Click on Header Panel -> Click on CSS Editor(Watermark symbol)

                         from top right corner -> Click on “Code” and write own CSS for height of the Panel                            or Click on Visual to perform styling without css coding.

8.       Repeat the step no. 7 for content panel and footer panel. Specify the colors and add logo image using image page element on header.

9.       Add copyright by using “Content Block” in Footer Panel.

Now Page Template will look like this

3. Creating a Site Pages

Site Pages is used to show different pages for our site. We have created Page Template. Now by using page template create site pages.

1.       On the Overview tab, hover over Site Pages and click “New”.

2.       Type the Name for the Page Name(Home Page).

3.       Click Page Template and Choose the Template.

4.       Click on Create.

5.       We need to unlock the content panel to make changes. Click div#content  -> Actions - > Override Parent Content.

6.       Click Ok at the override message.

7.       Select div#secondaryContent  -> Actions  -> Add Page Elements > Content Block.

8.       Double-click the content block to open the page editor.

9.       Write something in Home Page.

10.   Now the Home Page will look like this

11.   Repeat the above steps to create other pages. We can also use other elements for different page like forms, widgets, Buttons, custom code, data services.

12.   Url for site.com is,
 https://mydomain.force.com/s
s – “s” in url defines that the page is created using site.com
If user redirects to Home page, then url will be
https://mydomain.force.com/s/Home

4. Use Site.com With Community

Use Site.com to customize community pages. We can create site.com pages and publish those pages to community.

Navigation :  From Setup -> Type All Communities -> Click on All Communities -> Click Manage for the community to setup site.com -> Expand Administration -> Scroll down and Click on Pages -> Click on Go to Site.com link. It will redirect to site.com studio.

1.       Now Create Page Template.

2.       Create Site Pages.

3.       After completing those steps click on “Publish Changes”

 on top right corner.

4.       If you have made any changes it will prompt us with two options that are “Site wide changes” and “Only Selected items”. Site wide changes Includes all changes made to the site since the last time it was published. Only Selected items Publishes only the items we select. Click on Next -> Next -> Publish. Now Administrator will receive email with link for published site.

5.       Copy the link for later use.

6.       Go to salesforce org. From setup -> Type Tabs -> Go to Web Tab -> Click on New Web Tab -> Enter label for Tab -> Paste the URL under URL section -> Click Save.

7.       Now Go to Community -> Administration -> Tabs -> Add the created web tab to Selected Tab ->Click on Save.

8.        Login to community. Now we will be able to see the tab if the logged in user has permission.   Check below image for community with site.com.