The Meet the team 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 Meet the team sample 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/Meet The Team folder, the app's back-end files should go in /_System/apps/bc-meet-the-team and the front-end files to /bc-meet-the-team

What it contains

The app contains these files and folders:

Font-end

Broken down, the front-end consists of:

  • the webapp's layouts stored in the /Layouts/WebApps/Meet the team folder
  • the /bc-meet-the-team/index.html page used to list the webapp items
  • various other assets that are used on the front-end

Back-end

The Back-end consists of:

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

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

  • other pages and assets used for the back-end - the edit.html page, scripts and images

The back-end pages (the index.html and edit.html) pages do not use layouts to render the data. The layouts that come with the app are only used to render the front-end of the app. A few paragraphs below you will see that when customizing the back-end we edit the HTML and JS code, not the layouts.

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 Meet the Team 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-meet-the-team/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 Meet the team webapp and list its items
  • if no webapp named Meet the team 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-meet-the-team/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 "+" button or edit existing entries by clicking on them.

After you click either an existing item or the "+" button the /_System/apps/bc-meet-the-team/edit page will be opened up. If you clicked on an existing item that webapp items' details will be retrieved via API calls and filled in the appropriate fields. Clicking Save makes another call to update or create the webapp item.

 

In the front-end things are pretty straight forward: you can see the list of the webapp items (rendered using the List layout that comes with the app) by opening up the /bc-meet-the-team/index.html page and you can click each of the items to open up the individual webapp items (rendered with the Detail layout that is packaged with the app)

How to customize the sample app

Add a new webapp field and use it across the app's pages

In this example let's add a new field to the webapp named Experience. To do this follow the steps below:

Edit the webapp and add the field

Go to WebApps -> Meet the team and add a String type field named Experience:

Next let's edit one existing items and add fill in this newly created field. I have edited the item named Bridgett Maalouf and added 5 as the field's value.

Edit the HTML pages and scripts to add the new field

The back-end of the app (namely the content shown in the /_System/apps/bc-meet-the-team/index.html and the /_System/apps/bc-meet-the-team/edit.html pages) is all rendered using API calls so we will need to go in and change the HTML and javascript code to include this newly created field.

In the /_System/apps/bc-meet-the-team/index.html page add the placeholder for the new field:

Here is the code highlighted in the screenshot above:

Edit the /_System/apps/bc-meet-the-team/assets/team.js file to add the code that populates the placeholder:

Here is the line of code you need to add:

Because of the extra line we will also need to make sure the thumbnails are a bit higher, edit the /_System/Apps/bc-meet-the-team/assets/styles.css file and change the height for the .card-container selector to 236px

Now refresh the Admin Console, the landing page of the app should look like this:

You can add further logic to the script and hide the "Experience" placeholder if the field has no value.

Next up we need to edit the /_System/apps/bc-meet-the-team/edit.html page to make sure we can fill in the "Experience" field when adding new items or editing existing ones.

Add this code block just below the position div:

...like so:

Almost there! - the tricky part is finished

Because the back-end relies on APIs to get information from the system and save it back adding the "Experience" field required modifying the placeholders on the /_System/apps/bc-meet-the-team/index.html and /_System/apps/bc-meet-the-team/edit.html pages and the /_System/apps/bc-meet-the-team/assets/team.js script that actually does the API calls.

The next step is to edit the front-end files so the site visitors can also see the new field on the site's front-end. To do this you simply need to edit the List and Detail layouts to and add the tags for the "Experience" field.

Add this code snippet to the List layout:

...and this code snippet to the Detail layout:

Making sure the new field will be created when you reinstall the app

Remember how the app initializes? It first checks to see if the Meet the team webapp exists and if not it creates it using a predefined set of data (custom fields it needs to create and the 3 sample items).

If you plan to install this app on other sites or just start over again by deleting the webapp so it is regenerated there is one last additional step: you need to add the Experience custom field to the "blueprint" the app uses to create the Meet the team webapp. The blueprint is stored in the /_System/apps/bc-meet-the-team/assets/webapp.json file. Here is the block of code you need to add:

...and here is where to add it:

Change the location user photos are uploaded to

To change the folder the photos are stored into you need to open up the /_System/apps/bc-meet-the-team/assets/team.js folder and change the path stored into the WEBAPP_PHOTO_FOLDER variable.

Change the default user photo

Edit the /_System/apps/bc-meet-the-team/assets/team.js file, at the very top you will see the default user photo is named unknown.jpg and is stored into the folder defined in the MEMBER_DEFAULT_PHOTO variable.

You can either change the name of the image in the team.js file or replace the default unknown.jpg image located here - /bc-meet-the-team/images

Change the webapp slug

The webapp slug is this part of the URL:

To modify it change the value of the variable WEBAPP_SLUG.

Change the webapp's name

To change the name of the webapp you have to first change the value of the variable WEBAPP_NAME found at the top of the /_System/apps/bc-meet-the-team/assets/team.js file and then change the name of the webapp in the /bc-meet-the-team/index.html file:

When renaming the webapp do not forget to also rename the folder the webapp's layouts are stored in.