Photo gallery app

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

Business Catalyst End of life announcement - find out more details.

Download it from here

The Sample photo gallery app can be downloaded from our Web Apps SDK GitHub repository .

How to install it

The install process is pretty straight forward, all you need to do is copy the files over to the site you want to install it on and that's it.

The path of the folders should remain the same, the Layout files should go into the /Layouts/WebApps/bc-gallery folder the app's back-end files should go in /_System/apps/bc-gallery and the front-end files should go into /bc-gallery

What it contains

The app contains these files and folders:

App back-end files

Layout file

Front-end files


Broken down, the front-end consists of:

  • the webapp's layouts stored in the /Layouts/WebApps/bc-gallery folder
  • the /bc-gallery/index.html page used to list the photo gallery
  • the sample images stored into the /bc-gallery/images folder


The Back-end consists of:

  • the menu.json file located in /_System/apps/bc-gallery/_config
  • the webapp's landing page named index.html located in /_System/apps/bc-gallery/

Do not forget that assets stored in the app's system folder are not available for the front-end, see this section for details.

  • the gallery.js that contains the app's logic, the webapp.json file that stores the custom fields that the webapp should contain and the paths to the sample image files
  • other assets

Both the app's back-end landing page (/_System/apps/bc-gallery/index.html) and the front-end page (/bc-gallery/index.html) uses the webapp's list layout to render the data.

The list layout file

  • the list layout file is used for both font-end and back-end

How it works

After you copy all the files in the correct locations you can go to the Admin console and refresh it. The new Gallery entry should appear in the menu. Click that menu entry and the app will be launched.

The app is initialized

After launching the app the landing page /_System/apps/bc-gallery/index.html will be loaded. This page contains 3 sample webapp items:

In the background, before the content of the page is shown, several initialization steps happen:

  • the app is authorized
  • the app tries to open up the bc-gallery webapp and list its items
  • if no webapp named bc-gallery exists (this happens when you open up the app for the first time or after you delete the webapp) the app creates the webapp using a predefined structure found in the /_System/apps/bc-gallery/assets/webapp.json file and adds the 3 sample items.

Working with the app

After the app is launched and the initialization is completed you can add new webapp items using the "Add images" button or delete existing entries by clicking the "Trash" icon that appears when you hover them.

After you click the "Add images" button you will be prompted to choose the new image file from your computer. After you chose your image it will be transferred to the /bc-gallery/images folder and a new webapp item is created:

In the front-end things are pretty straight forward: on the /bc-gallery/index.html page the webapps are listed using the same "list" layout, the difference is this time they have the jQuery bxSlider implemented for the slider effect.