UUA District Congregation Data Integration

Below are the instructions to allow you to integrate Congregation information into any webpage.

Installation Steps

  1. If Using Wordpress, install the Post Snippet plugin.
    This will add a snippet tool to your wordpress editor, to easily allow you to add the congregation list as a snippet:
  2. Create A Snippet
    In the WordPress Dashboard - navigate to Settings/Post Snippets and select 'Add New Snippet. In the page that opens, Name your snippet and past the code below into the snippet area, and save the snippet:
    Important: Be sure and check the 'Shortcode' checkbox to ensure the code is not loaded into the wordpress editor (The wordpress editor alters the html tags.)
    (Paste this code into the snippet editor):

        <div ng-app="UUADistrict">
            <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js'></script>
            <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.js'></script>
            <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-messages.js'></script>
            <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.min.js'></script>
            <script type="text/javascript" src="http://districtapi.vfsweb.net/_angular/app.js"></script>
            <div ng-controller="Congregations">
            <div ng-show="showSpinner" style="padding-top:25px;padding-left:50px;">
                   <img src="http://districtapi.vfsweb.net/images/spinner.gif" alt="please wait" style="height:200px;" />
                    <!-- --------------   CONGREGATION TABLE --------------->
            <table cellspacing="0" cellpadding="2" border="0" style="border:0px;">
                <tr ng-repeat="congregation in congregations.data" style="border:0px;border-color:#ffffff;">
                    <td style="border:0px;border-bottom:solid 1px #444444;padding-bottom:7px;padding-top:7px;">
                        <div style="padding-bottom:5px;font-weight:bold;">{{congregation.City}}</div>
                        <div style="padding-left:10px;">{{congregation.Congregation}}</div>
                        <div style="padding-left:10px;">{{congregation.Address1}}</div>
                        <div style="padding-left:10px;">{{congregation.City}}, {{congregation.State}}  {{congregation.PostalCode}}</div>
                        <div style="padding-left:10px;">Phone: {{congregation.Phone}}</div>
                        <div style="padding-left:10px;">Email: {{congregation.Email}}</div>
                        <div style="padding-left:10px;" ng-show="congregation.WebsiteUrl">
                               Website: <a href="http://{{congregation.WebsiteUrl}}" target="_cong">{{congregation.WebsiteUrl}}</a>
                        <div style="padding-left:10px;" ng-show="congregation.UUAID.length > 0">
                            UUA ID: {{congregation.UUAID}}
                        <div style="padding-left:10px;" ng-show="congregation.IsDistrictFairShare == true || congregation.IsUUAFairShare == true">
                            Honor Congregation: <span ng-show="congregation.IsUUAFairShare == true">UUA  </span><span ng-show="congregation.IsDistrictFairShare == true">{{congregation.District}}</span>
                        <div ng-show="congregation.MeetingPlace" style="padding-top:5px;">
                        <div>Meeting Place:</div>
                        <div style="padding-left:5px;"> {{congregation.MeetingPlace}}</div>
                <td style="vertical-align:top;border:0px;border-bottom:solid 1px #444444;padding-bottom:7px;padding-top:7px;">
                            <!-- --------------   CONGREGATION LEADER LIST --------------->
                    <div ng-repeat="person in congregation.Persons">
                         <span ng-bind-html="renderHtml(person.RoleName)"></span>: {{person.Title}} {{person.FirstName}} {{person.LastName}}<span ng-show="person.AltTitle.length > 0">,</span> {{person.AltTitle}}
  3. Insert the snippet into your page
    Go to the page that you want to add your congregation list to, and click on the snippet tool. Select the congregation snippet you just created. The congregation list is now inserted into your page.
  4. Style the HTML and add fields if desired
    Style the HTML and add fields. The code above is a basic list of congregational data with minimal styling. This HTML can be styled like any other HTML using classes, styles, etc.

    The variables enclosed in the {{ }} tags are the congregatation and congregational leader fields that will be substituted into the page when it is rendered. Each Congregation may have 0 or more congregation leaders available for display.

    Click here to see the Congregation fields and Congregation Leader fields available for display:

  5. View the page.
    IMPORTANT: To view the congregation list, additional parameters must be either embedded in the url, or added in the querystring of the url:
    st Yes The Congregation State Abbreviation for which to pull congregations. I.E. 'WA' for Washington, 'CA' for California, or 'all' for congregations.
    d Yes The District Abbreviation of the District of the Congregations. I.E. 'PNW' for Pacific Northwest, 'MD' for Mountain Desert, 'PSW' for Pacific Southwest.
    See the sample URLs below for how to add these variables. These variables must be either embedded in the url as shown below, or added in the querstring (after a ? at the end of the url)
  6. Sample URLs
    Using querystring variables:
    Using page URL