Data Collections Usage Guide

The sky is the limit with BlueberryCMS Data Collections!

Our Data Collections feature is one of the strongest, flexible, and most advanced core functions of BlueberryCMS. Data Collections allow you to create your own custom data driven web applications with ease.

Consider Data Collections the new and improved version of Adobe Business Catalyst's WebApps feature. It even acts as a drop-in replacement.

Some of the most popular use cases for data collections are:

• Restaurant Menus
• Real Estate Listings
• Business Directories
• Dynamic Image Sliders (Hero Sliders)
• Video, Photo, and Media Libraries for Creators
• Product Databases
• And so, so much more.

Placing a Data Collection on a Web Page

You can easily insert a Data Collection on any Web Page, Page Template, or Include File simply by using the bb_datacollection tag. Be sure to include spaces in the name if you have them. This will display the complete list of Data Collection Items.

{bb_datacollection source="Data Collection Name"}

What are the components of a Data Collection?

Items

These are essentially the rows of your database. The data itself. It could be a list of book reviews, recipes, videos, real estate listings, etc. You can setup your own custom fields which are basically the "columns" of your database which we'll discuss later.

Settings

Each Data Collection has a variety of settings that can be applied. 

• Collection Name
• Detail Template
• Parent Collection
• Expiry Date
• Payment Required (Front-end Features Coming Soon!)
• Disable Detail Page
• Allow GEO Mapping
• Include in Site Map

Fields

The fields in a Data Collection define the type of data you're collecting. Common items might include names, addresses, rich HTML content, phone numbers, files, URLs, dates, times, etc, there are options for just about everything! Simply add your fields then Drag'n'Drop them in the order in which you'd like them displayed.

Those fields can then be referenced in your Layouts as such. 

{{dataName}} (this is the Item Name)
{{Publish_Date}}
{{Case_Is_Not_Required_But_Looks_Nice}}

Be sure to check out our Developers Documentation for more in depth resources about Data Collection tags.

Layouts

List View Layout

The List View Layout is exactly what it sounds like. It is the layout in which lists all of your Data Collection Items and is fully customizable using your own HTML and CSS.

By placing a {bb_datacollection} tag on any Web Page, Page Template, or Include File, BlueberryCMS will generate the complete list of Data Collection items using the layout you design! First, put this tag on one of your pages.

{bb_datacollection source="Data Collection Name"}

Then edit your list layout under the Content > Data Collections > Edit Collection > Layouts tab. The List View layout will loop this markup until it runs out of items to display. Here's an example of a basic list layout.

<div class="dc-item-container"> 
  <h3>{{dataName}}</h3>
  <div class="content">{{dataContent}}</div>
  <p class="dc_image">{{image}}</p>
  <p><a href="{{dataUrl}}">Click here to read more!</a></p>
</div>

Tag Options

<!-- Use the NoLink appendage if you don't want a hyperlink. -->
<h3>{{dataNameNoLink}}</h3>

<!-- Truncate the amount of content displayed. -->
{{dataContent | truncate: 300,'...'}}

<!-- Generate just the URL of image of a data collection item. -->
<img src="{{imageUrl}}" alt="My custom image element." />

Detail View Layout

The Detail View Layout is what your website visitors will see when they click on a link to view more details about a data item. As shown in the example above, the {{dataName}} tag generates a hyperlink that goes to an entire page that shows all the details about that particular Data Item.

<div class="detail-wrapper">
  <h1>{{dataNameNoLink}}</h1>
  <img src="{{imageUrl}}" alt="{{image_alt_tag}}" />
  {{dataContent}}
</div>

The Page Template used by the Detail View page is determined by what you set under the Settings tab of the Data Collection itself. 

Edit View Layout

Coming soon! The Edit View Layout will allow you to create a Web Form that will be displayed on the front-end of your website designed for visitor's and users to fill out. Upon submission, the data will be inserted as a Data Collection Item.

Auto Responder

This feature, when enabled, automatically sends an email to the person who fills out a front-end Data Collection form displayed to your visitors.

Customer Permissions

Coming soon! This allows for various controls over the front-end form that is displayed to your visitors.

Relevant articles:

• How to create a Data Collection
• How to edit a Data Collection
• Data Collection Layouts