Several years ago, we added a Release Notes section to our community, designed to keep customers up to date on past and future releases of the IPS Community Suite.
Complete Release Notes
Many have asked what we used to create the new section, and as you might expect, the answer is our own Pages app, part of the IPS Community Suite. While everything in the new section was built using standard Pages features, some of the techniques aren't things you'll see in the default t
Load the first record when the page is loaded
Handle click events on the other records to load the ones the user clicks
The Release Notes section is built using the Database feature in Pages, so the first step is simply to create the database we'll be using.
What are databases?
The Databases feature in Pages gives you the tools you need to create your own custom data-driven sections of your community. You define the settings and fields in the database, and Pages gives you support for categories, comments, reviews, ratings and more - just like full IPS Community Suite applications. Since you have
The next stage of building our Release Notes section is to create our custom fields.
What are custom fields?
By default, a database in Pages has some generic fields set up for you - things like the record title and record content. In most cases though, you'll need other types of information for each record too, and that's where custom fields come in. They allow you to define other pieces of information about records, which is displayed as part of the record. Pages supports a wi
By default, Pages will show your custom fields as badges in the listing and record views, and when creating a field you can choose a color and some basic positioning options. For many of your uses, this may be sufficient, but for more advanced usage Pages allows you to set up custom field formatters that take the raw data and display it however you wish. We're going to use field formatters for each of our custom fields so we can control exactly how they look.
How do field forma
Before we move on, it would be a good time to add some sample data to your database. Since we'll be working on templates next, it would be helpful to have some records to see.
Add some data by going to the page on your community (<your community url>/release-notes/ if you chose the same page name in the earlier step).
You may remember we're currently sorting by the default field, which is Record ID. Now that we've created our custom fields, w
Before we start editing the templates for our database, we're going to create custom CSS and JS files that will allow us to customize the style and functionality beyond what Pages does by default.
Custom CSS & JS files apply to the page rather than the database, so you could use them even if you're doing something that doesn't make use of the Databases feature. Of course, in this tutorial we are using databases, so our styles will mostly be geared to styling them.
About database templates
In Pages, there are four kinds of basic database template:
The templates that show the list of records. If you use categories, this is the template used when you click into a category. if you don't use categories but do use a record listing, this is the template that forms the index/homepage of the database.
A template that allows you to customize the add/edit form for records in your database.
Templates used when
How the Release Notes section is structured
Before we start editing the templates, it would be helpful to understand how the finished section is going work. By default in Pages database, you see a record listing (which uses the Listing templates), you click through to a record which loads a new page to show it (which uses the Display templates). In our Release Notes database however, there's no page reload - the record is loaded dynamically via AJAX.
Record display - record template (See diff)
This is the main template for the display portion of our database.
Here's the final code:
There isn't too much going on here that hasn't already been explained. We're using the customFieldDisplayByKey method of the record to output our formatted fields, although we're using the display type this time: