Site.com Data and Content Strategies

Site.com is a content management system (CMS) that provides a way for people in non-technical roles to build and maintain websites.  This article details useful ways to manage and display data and content.  An example of displaying Product information is used throughout this article.

One of the reasons that Site.com is so powerful is that it has the ability to display information directly from Salesforce using Site.com data services such as the Data Repeater.  Part of the design of a Site.com Site is determining what should be stored in Salesforce and what should be stored in Site.com.  In general, content should reside in Site.com and information such as relationships or simple attributes should reside in Salesforce. There are two different ways to approach designing the dynamic portions of pages.  One is to just display directly what comes from Salesforce and the other is to use what was retrieved from Salesforce to dynamically determine what content to display.

A common use case for Site.com is the need for a detail page to display information for a certain type of Object (e.g., event detail, product detail, account detail, etc.).  There are two different approaches to consider and which one to use is dependent on the specific requirements of the site.

One approach is to have a single page (e.g., Product page) for the type of Object and have all record specific content/information maintained in Salesforce. In this pattern the content contributor would maintain everything directly in Salesforce (or in the case of multi-media the location in Site.com of the content — more on that later).  This works well if all of the content on the page being built will be in the exact same format for all records.  For example, if a Product page just displays a single image and simple single sentence blurb about the Product this approach works well.

The other approach is to have a Page Template (e.g., Product Page Template) for the type of Object and have the main content section of the page maintained in Site.com.  With this approach simple fields (e.g., Name, Address, Phone, etc.) would still be retrieved directly from Salesforce, but the main content about each Product would be maintained in Site.com on the individual Product pages.

The rest of this article focuses on the second pattern, where each record has its own page.  This article does not contain line by line how-to instructions. For the basics of how to perform the individual actions such as creating pages or adding elements to a page, see the Site.com Help Pages or the Salesforce.com User Guide. The example uses a one column Page Template with div#header, div#content, and div#footer sections, but the general ideas could be applied to any layout.

Product Template

The Product Template’s structure will end up as the following:

Page Template Structure

The header section will always display the Product’s name by retrieving it from Salesforce. A Data Repeater is added to div#header section. On the Data Repeater editor, the Product from the Object picklist must be selected. If it is not there then the correct permissions for the Product must be set on the Site’s Guest Profile.  You can do this by navigating to the profile from the Site Configuration or from the Data Repeater popup by clicking the “go to Guest User profile” link (opens a new tab/window). Then come back to the screen and click the Refresh the picklist link and you should be able to select the Product object. Next, the Filter on the Data Repeater must be configured. For that, choose the Product ID field equals a URL query string parameter with the name of id.  Once the Data Repeater is on the page you can add a Data Element to pull in the Product Name.

Data Connection Filter
Data Connection Filter

A Data Repeater for the Product with the same configurations is also added to the div#content area.  In this case a Product image stored in Site.com needs to be displayed. Instead of  dynamically displaying the data directly from Salesforce, the location of the content in the Site is provided to dynamically retrieve it.  A Custom Code Block with a single image tag <img src="/img/{!Site_com_Image_Relative_URL_c}" alt="{!Name}" height="200" width="400" class="product-image" /> is created. The Product record holds the location of the image used in the Custom Code Block in a custom field Site.com Relative URL (Site_com_Image_Relative_URL__c).  The Custom Code Block references it with an expression.  In Site.com expressions function sort of like merge fields.  For the maintenance of the Product fields in Salesforce, it is a good idea to create a Permission Set for contributors and set Field Level Security on the Product’s Site.com fields so that only contributors can edit them.  

A Content Block is added inside of the same Data Repeater used for the image in the div#content and it is made editable.  This is the section that the content contributors will customize on the individual pages.  By placing it inside of the Content Block, the contributors will have the ability to access fields of the Product inside of their Content Block on each individual page by using expressions.

Pages

Each Page’s structure will be the following:

Page Structure

New Pages can be created that use the Product Template for each Product. The URL for the pages are in the form of /product-page-name?id=yourProductsRecId. For example, a page can be created called “diesel-engine” and put it in a folder called products which would be accessed from the URL /products/diesel-engine?id=01ti000000241q4.

If you don’t like seeing the id parameter in the URL, you can create an alias redirect and refer to the page by the alias. Go to Site Configuration, then URL Redirects, and select Alias for the type. The Redirect From should have the friendly URL, /products/diesel-engine, and the Redirect To should have the URL with the parameter, /products/diesel-engine?id=01ti000000241q4. Since the Alias redirects are all done server side, the page visitor is never exposed to the id parameter.

Alias Redirect Rule
Alias Redirect Rule

Following this pattern allows contributors to have the benefit of the content editing capabilities of Site.com while still being able to access the data stored in Salesforce.

Future Considerations

In the upcoming Spring ’14 release, a new Site.com feature called Page Data Connections could replace the technique of using Data Repeaters to retrieve the data. Instead of using Data Repeaters, you’ll simply have access to the record’s attributes via expressions in all areas of the page.

28 thoughts on “Site.com Data and Content Strategies

  1. I haven’t done as much with Site.com as I would like, but I am really loving some of the changes they are pushing down this path. Salesforce is quickly making Site.com the go-to-method for creating simple production quality sites quickly. Something like a product catalog with product information is a perfect example!

    Great article!

  2. Great article Peter.

    I’m looking for a little more sophisticated logic, but I imagine it must be doable. I want to display content in a site.com page based on the logic of a field in a connected record. For instance, say there’s a field on each record that will either be “CA” or “NV”, and based on that value I want the page to display a different link. If the value is “CA” I want the link to go the California URL, and if it’s “NV,” a Nevada URL. Any idea how to do this?

    Perhaps this will come with the “Page Data Connections” functionality in the future?

    1. Glad you liked the article! 🙂

      There isn’t currently any conditional logic (e.g., if statements) built into Site.com. I can think of two things:

      1. You could use JavaScript to create the values for the links dynamically. (kind of icky)
      2. Create a formula field on the record that builds the URL based on the value and then just reference the formula field in your Site.com page for the link.

      1. That’s what I was afraid of. There are too many links and bits of text to create formula fields I think. What I’ve done is closer to your (somewhat “icky”) solution #1. I have tagged all CA content with CSS “.ca” <span>’s, and all NV content with CSS “.nv” <span>s. Then I hide all those items via css. Then I have a line of jquery that reads the field from Salesforce, and shows all <span>’s with that value.

        It works, and I can’t decide whether it’s ingenious or icky. Really, I just look forward to Site.com allowing conditional logic.

    1. The comment editor read them as HTML. Using html entities for less than and greater than or a pre tag works. I fixed them, so they should read as span tags correctly now. Thanks for commenting back with how you implemented it.

  3. While could find info their schedules by checking online,
    pertains to the subject way to out to view the leonids to catch a bus is with
    calling them all. Color has become practically a communication sport.
    Is usually still high quality but won’t sell at as much.
    All these three belongings possess a lot of significance in our existence.
    Cheap Ralph Lauren Sale Uk

  4. Pingback: more tips here
  5. What’s Taking place i am new to this, I stumbled upon this I have discovered It absolutely
    useful and it has helped me out loads. I’m hoping to contribute & aid
    different customers like its aided me. Great job.

  6. Pingback: read what he said
  7. Pingback: try here
  8. Shopping in the posh districts of United Arab Emirates has become a fashion statement.
    Shopping online for women’s clothing will take you to numerous designer clothing boutiques and shops.
    Along with the shape of the face, there is also the question of what
    you want on the face itself.

  9. Aϲcording to Һіm, а Ԁɑіⅼү dοѕe of 125 ӏU НCG іnjесtіоn cоmƅineԀ
    ᴡitҺ a ⅼοᴡ сɑlοrіᥱ ԁіᥱt οf 500 calοгіеѕ and ⅼⲟѡ сагƄоһyԁrɑtе, hіǥҺ ⲣгоtеin Ԁіеt ϲаսsеѕ fɑѕt lⲟsѕ ߋf ƅⲟdʏ weіǥһt ѡіtɦоսt any
    lοѕs іn ⅼᥱan musϲlе.
    Ꭲhᥱ fіrѕt ѕtеρ іnvߋⅼνes thᥱ ρгeρarɑtіⲟn fог thе ɗiеtагү ⲣⅼаn. Αlοng աitҺ tһе іntaкe օf ΗСG, ɑ rеѕtrictіᴠᥱ diet wһіϲҺ ɗοᥱѕ not еxϲeеԀ 500 cаⅼогіes рer Ԁаʏ mᥙѕt Ƅе fߋⅼⅼօաeԀ
    aⅼοng աitɦ еxегϲіѕing іn οгԁег tⲟ һaᴠе ѕᥙϲcᥱsѕfᥙⅼ геѕսⅼtѕ.

    Ιn tɦе 2nd ᎻⅭG ρгⲟǥrаm, іt iѕ
    aѕѕumеԁ that аn аνеrаgе
    ѡᥱіǥҺt ⅼߋѕѕ ߋf ɑpⲣrօҳ 1-2 рοսndѕ ρer ɗaʏ іѕ ѕеen and it
    іѕ а ցоοɗ ѕіǥn. Ріlⅼs,
    ɗіеtѕ and еⲭегϲіѕе tеϲhniԛᥙᥱѕ ցuɑranteᥱⅾ tⲟ mеlt аԝaʏ fat tο гeѵеaⅼ a ѕⅼеndег and
    һеaⅼtҺiег ʏοu.

    Ⲥһеcк ⲟut my Ƅⅼοǥ
    ρоѕt; ԝᥱiɡһt ⅼоѕs cеntегѕ tɦаt uѕᥱ hсɡ (Rosita)

  10. That is a very gooԁ tіp еѕρᥱciаllу tο tһоѕе neᴡ tο the blоɡоspɦеrе.
    Ᏼrief Ƅut ᴠегy ɑсϲᥙгatе infо… Tɦаnk үou fοг ѕҺɑгіng tһіѕ οne.
    A muѕt геad агtіϲlе!

  11. Whats up very cool blog!! Guy .. Beautiful .. Wonderful ..
    I will bookmark your site and take the feeds also?

    I’m happy to seek out numerous useful info right here in the post, we want develop more strategies on this regard, thank you for sharing.
    . . . . .

  12. Thanks for your personal marvelous posting! I seriously enjoyed reading it, you could be
    a great author. I will ensure that I bookmark your blog and will come back down the road.
    I want to encourage you continue your great posts,
    have a nice morning!

  13. I believe that is one of the most significant information for me.
    And i am happy studying your article. But wanna statement on some general things, The web site taste is perfect,
    the articles is in reality great : D. Good process, cheers

  14. Just want to say your article is as surprising. The clarity in your post is just cool and i could assume you are an expert on this subject.

    Fine with your permission let me to grab your RSS feed to keep updated with forthcoming post.
    Thanks a million and please carry on the enjoyable
    work.

  15. Pingback: try this website
  16. I’m amazeⅾ, I must say. Seldom do I encounter a blog
    that’s both equаlly educative and interesting, аnd without a doubt, you have
    hit thе nail on the head. The problem is something that
    tоo few folks are speaking intelligently about. I’m very Һappy thɑt I came across this during my search foг something relating to this.

Leave a Reply

Your email address will not be published. Required fields are marked *