Quick Links Widget¶

The Quick Links widget displays buttons that link to specific pages within your TouchPoint database. These buttons can be customized to point to frequently used pages.

The Widget uses only an HTML file as shown below. Since the data is the same for all users, caching should be set to all users.

To customize the widget, you can modify the pages to which the buttons link and/or change the color of the buttons and text. In the HTML code:

• Change the URL to which the buttons link. Navigate to the desired page and copy everything after the first single slash and replace the corresponding text shown below. In this example, you will be replacing Person2/0 in the URL.

  <a href="https://mychurch.tpsdb.com/Person2/0" type="button" class="block"><b>My Profile</b></a>
  

• Modify a tab. Replace the part of the URL after the hashtag as shown below. In this example, you will be replacing tab-memberstatus in the URL.

  <a href="https://mychurch.tpsdb.com/Person2/0#tab-memberstatus" typee="button" class="block"><b>My Profile</b></a>
  

• Change the label of the button. To change the button’s label, modify the text between the <b> and </b> tags as shown in the example below. In this example, you will be replacing My Profile in the line of code.

  <a href="https://mychurch.tpsdb.com/Person2/0" type="button" class="block"><b>My Profile</b></a>
  

• Change color of the buttons or of the button labels. Update the button background color in line 26 or the label font color in line 27.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="box">
    <div class="box-title hidden-xs">
        <h5><a href="/Tags">{{WidgetName}}</a></h5>
    </div>
    <a class="visible-xs-block" id="{{WidgetId}}-collapse" data-toggle="collapse" href="#{{WidgetId}}-section" aria-expanded="true" aria-controls="{{WidgetId}}-section">
        <div class="box-title">
            <h5><i class="fa fa-chevron-circle-right"></i>&nbsp;&nbsp;{{WidgetName}}</h5>
        </div>
    </a>
    <div class="collapse in" id="{{WidgetId}}-section">
        <ul class="list-group">
            <li class="list-group-item">
                <a href="/Person2/0" class="btn btn-block btn-primary"><b>My Profile</b></a>
            </li>
            <li class="list-group-item">
                <a href="/PictureDirectory" class="btn btn-block btn-primary"><b>Picture Directory</b></a>
            </li>
            <li class="list-group-item">
                <a href="/Person2/0#tab-resources" class="btn btn-block btn-primary"><b>My Resources</b></a>
            </li>
        </ul>
    </div>
</div>

<style>
</style>