Small Group Finder Step 2 - Create the Layout¶

If you have not read the Overview about how the Small Group Finder works, or Step 1, you will want to do so before proceeding.

Create the Layout¶

The Layout is how each small group will be displayed. We have created two sample layouts for you, so that you can copy and paste it in the HTML file you will create. However, if you know HTML, you can revise it if you want. If you follow the directions below to create the first Layout, here is a sample of what it will look like.

Note that it displays the Involvement Name, the Campus, Meeting Time, the Leader, the Room and a Description. If the leader has a photo on his people record, that will display as well. It also has a link for a map. This one does not have a link for online registration, but you can include that, if you choose. The text below (for you to copy) has that included.

https://i.tpsdb.com/2015-10-30_13-20-44-1.png

Note

Sample #1 below, with the group leader’s photo may not be suitable for mobile devices. This layout was designed with larger screens in mind. If you envision your finder being used on mobile devices, we recommend sample #2, which is streamlined and omits the photos. These samples are just that – samples. Neither are one-size-fits-all solutions for your layout. You should revise the content and design to suit your purposes.

Step 1

Go to Admin > Advanced > Special Content > HTML tab, and click the green + New HTML File button.

Enter the File Name as SGF-Layout, and click Submit.

Step 2

Click Source in the toolbar of the text editor. Highlight anything that is currently there and delete it. Then copy one of the following blocks of text and paste it into the text editor.

Sample #1

<title></title>
<div style="padding:7px; border-top:3px #007CC2 solid; margin-bottom:20px;">&nbsp;
<table width="100%">
    <tbody>
        <tr>
            <td style="width: 99%; padding-right: 30px;">
            <h2>[SGF:Name]</h2>
            <strong>Campus:</strong> [SGF:Campus]<br />
            <strong>Meeting Time:</strong> [SGF:Schedule]<br />
            <strong>Location:</strong> [SGF:Room]<br />
            <br />
            [SGF:Description]<br />
            <br />
            <a class="btn" href="https://MYCHURCH.tpsdb.com/OnlineReg/Index/[SGF:OrgID]">Register Here</a></td>
            <td style="text-align: center; width:1%; white-space: nowrap;"><img src="[SGF:LeaderPicSrc]" width="128" /><br />
            <strong>Leader:</strong><br />
            [SGF:Leader]</td>
        </tr>
    </tbody>
</table>
</div>

Sample #2

<head>
    <title></title>
</head>
<body>
    <div class="form-group">
        <h4>[SGF:Name]</h4>
        <strong>Meeting Time:</strong> [SGF:Schedule]<br />
        <strong>Location:</strong> [SGF:Room]<br />
        <br />
        [SGF:Description]<br />
        <br />
        <a class="btn btn-default" href="/OnlineReg/[SGF:OrgID]">Signup</a>
    </div>
</body>

Step 3

After pasting the text, click where you see the words MYCHURCH in the URL for online registration, and change that to the name of your church as it appears in your TouchPoint URL.

Click Source again.

Click Save Content.

Note

The above scripts includes links for people to register online. If you do not want to include that option, after pasting it into your HTML file, remove this entire line of text: <a class="btn" href="https://MYCHURCH.tpsdb.com/OnlineReg/Index/[SGF:OrgID]">Register Here</a></td>

If your church does not have multiple campuses, remove this line of text from Sample #1: <strong>Campus:</strong> [SGF:Campus]<br />

Caution

By default, database images cannot be viewed by someone who is not logged in. If you need the Small Group Finder to display leader photos, even for those who are not logged in, assign the administration setting SecureProfilePictures a value of false. Be aware, though, that with this setting set to false, it is possible for your database profile photos to be viewed by anyone who can figure out the URL.

Available Involvement Field Codes¶

In your layout, you can include any of the SGF extra values you have created and placed on the Involvements, as well as any of the codes below for built-in Involvement fields:

[SGF:OrgID]
[SGF:Name] (org name)
[SGF:Description]
[SGF:Room] (location)
[SGF:Leader] (name of person with a leader type matching Involvement’s Leader Member Type)
[SGF:LeaderPicSrc]
[SGF:DateStamp] (now)
[SGF:Schedule]
[SGF:Campus]
[SGF:remainingcapacity] (Displays the number of open spots left in the group. Subtracts the number members of the involvement from the optional Max Limit on the Involvement)

Involvements

Small Group Finder Step 2 - Create the Layout¶

Create the Layout¶

Available Involvement Field Codes¶

Continue Setting up the Small Group Finder¶