Displaying and customizing Web Apps and items

Updated on 20-October-2016 at 10:16 AM

After creating your Web App and added Web App items, the next step is to insert the Web App listing on your site and then customizing the look and feel of the items.

Insert the Web app listing in a page

  1. Open the page in editing mode by selecting Site Manager > Pages and clicking the page in the tree view.
  2. Place the cursor in the content editor where you want to insert the items.
  3. In the Modules tab of the Toolbox found on the right of the editor, select Web Apps > List of Web App Items.
  4. Select the Web app and then select the item or items you want to display, then click Insert.
    Business Catalyst inserts a placeholder tag representing the Web app module. When you publish the page, Web app items replace the placeholder tag.
  5. Click Update or Save Draft.

This will display the Web App items in the default listing format. The next step is to customize the Web App layouts so that you can customize how Web App items are displayed on your site.

Customzing Web App layouts

Web App layouts control the way in which Web App items are displayed. There are 4 layouts you can customize:

  • Detail layout - This is the large/detailed view of a Web App item. It can be accessed by clicking the name of an item from the list view, or by linking directly to the item detail page.
  • Edit layout - This page is used with vistior submitted Web App items. This page appears when the user clicks edit on the live site to update the Web App item.
    Note: The edit layout is only used when building visitor-submitted Web Apps. Basic (administrator-submitted) Web Apps do not require an edit interface, because the contributors log into the Admin Console to create and edit items. Visitor-submitted Web Apps can be configured to only let the visitor who submitted the content edit it. They can also be configured to let all registered visitors edit the content items (based on the settings applied in the Web App Details page).
    When working with the Edit layout in the online editor in the Admin Console, you can scroll to the bottom and click the Restore to Default button to quickly update the edit layout will all of the custom data fields that you added to the Web App. Although the Restore to Default button is available for the other three layouts, the Edit layout is the only one that populates the code with the custom fields.
  • List layout - The list of all of the Web App items when inserted into a page.
    Note: Although you can format the List layout with HTML, CSS and JavaScript to update its appearance, you'll use the Toolbox to choose whether the list will display a single Web App item, a list of all items, or a list of the most recent items. Using the interface, you can specify how many items are displayed.
  • List layout (backup) - This layout provides a second way to display the list of Web App items.
    The List layout (backup) layout is not always used, but you can insert this alternate view of the list of Web App items in situations where you want to display the content of a Web App in a different way. For example, you can feature one specific item, or a series of rotating, random Web App items on the site's home page. This enables you to raise the visibility of the Web App without taking up a lot of screen real estate. In the case of a visitor-submitted Web App, you can use this approach to entice users to register so that they can see all the Web App items, or to encourage them to contribute content to the Web App.

Accessing the layouts

To access the Web App layouts, do one of the following:

  • Select Site Manager > Module Templates, and then click Web App Layouts.

    In the page that appears, select the name of the Web App, and then use the menu to choose the layout you wish to edit: List, List (Backup), Detail or Edit.
     

  • Select Web Apps, and then click on the Web App name.

    Click Edit Web App Settings, and then click the Layout tab.

    Use the menu to choose the layout you wish to edit: List, List (Backup), Detail or Edit.

Using tags to customize the layouts

With the layout of your choice open, you can now insert dynamic tags from the Toolbox menu on the right to customize these layouts. The tags represent dynamic content generated by the data in the custom fields for an item..

For example, if you have created a custom radio list field called "options", you can display the content of this field using: