Icon Systems main dove logo

IconCMO API — Directory Setup

Return to IconCMO Home Page

graphic of directory integration

The directory example shows a sample Javascript-based directory (using the Dojo toolkit) that you can easily integrate into your church's web site. It features easy install, customizable appearance, lazy-loading, pictures, and Facebook links. No server-side code is required.

Please note that only those households marked as "Include in Directory" will be included in the directory. Additionally, only phone numbers and emails marked as "Listed" will be included in the online directory.

Security Set-up

While there are many possible configurations, the most common is to allow parishioners to use their member portal log-in information to access the directory. If you have set up the member portal under Web-Services→Setup→Member Portal Security, no further settings are required. Your parishioners can use that username and password to log in to the directory.

To set up the security for other web services users:

  1. Go to the "Web Service Security" menu, which is found under Web-Services→Setup.
  2. In the upper right, you should see the member portal usernames listed.
  3. In the bottom left, select the user whose access you want to modify in the menu labelled "Modify Security For."
  4. In the "List of Functions" menu directly about the "Modify Security For" menu, choose "Membership: Directory".
  5. Check the "Read" check box and click "Set Security."

Continue by installing the necessary files onto your web server.

Web Server Set-up

To install:

  1. Determine the .html file that will contain the directory. It can be named whatever you want; we'll call it directory.html for ease.
  2. Download the directory files and unzip them in your web directory at the same level as directory.html so that you see directory.html and the directory next to each other.
  3. Add the following to directory.html's <head> section: 
     <script type="text/javascript" src="directory/directory.js"></script>
  4. Add the following to directory.html's <body> section: 
     <div id="directory-div"></div>
    The div id is customizable in the next step, if desired.
  5. Open the directory/directory.js file. You must modify the "churchPhoneNumber" on line 3. The other parameters are open to customization, as well, but are not required. Usernames and passwords will be provided by visitors to your web page in order to view the directory.

Please note: the directory includes some CSS that may override certain CSS styles you have put in place. If you find this to be the case, please contact us and we will attempt to remedy the situation.

Please note: Due to browser limitations, cookies will only be set (and, therefore, log-in information remembered) if the directory is viewed from a web server and not from a local file. With this exception, the directory should work just fine either way.

Congratulations! You've completed an integration with IconCMO!