Jump to content

Advanced Tutorial: Recreating the "Release Notes" section

  1. Introduction

    Several months 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.  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 t
  2. Making it interactive with Javascript

    We can now tie everything together with some Javascript. It's with the Javascript that everything will feel snappy and interactive. Begin by heading over to the template editor, and editing the Javascript file we created earlier. The Javascript controller we write will do two things: Load the first record when the page is loaded Handle click events on the other records to load the ones the user clicks &#
  3. Setting up the database

    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 Commu
  4. Creating custom fields

    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
  5. Field formatting

    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.  
  6. Adding sample data & adjusting sorting

    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).   Adjusting sorting You may remember we're currently sorting by the
  7. Using custom CSS & JS

    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.   Creating t
  8. Creating basic templates

    About database templates In Pages, there are four kinds of basic database template: Listing 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. Form A template that allows you to customize the add/edit for
  9. Customizing our listing templates

    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. &
  10. Customizing our display templates

    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: {$record->customFieldDisplayByKe
  • Create New...