Examples: IQA templates

Review the examples to better understand how to utilize query templates.

In This Article 

Displaying product images in a query template
Displaying profile pictures in a query template
Displaying cards of data using conditional functions
Creating a restricted-access button on website content

Displaying product images in a query template

This example details how to display commerce product images in the query template. Do the following:

1. Go to RiSE > Intelligent Query Architect > New > Query.
2. Name the query Product Thumbnails.
3. (Sources tab) From the Add source area on the right-side, select Products.
4. (Display tab) Scroll down to the bottom of the query window:
   1. Enter the following information in the Custom section:
      • SQL Expression: REPLACE(vBoCsProduct.THUMBNAIL_URL,'~','')
      • Alias: Image
   2. Click Add.
5. (Display tab) Continue adding the desired display columns.
6. Click Save.
7. Click the Template tab.
8. Insert the Image data source.



9. Click the HTML tab.
10. Update the data source to the following: <img src= "{#query.Image}">
11. Click back to the Design tab. The image property will look like a broken image.
12. Continue adding data sources to the Template tab.



13. Save the template. Add the query to content using the Query Template Display content item. See Displaying the query template.

Displaying profile pictures in a query template

To display user profile pictures, you must use the ContactProfileImage business object and one of the properties with “File Path” in the name.

Do the following to display profile pictures using the query Template tab:

1. From the query Display tab, make sure you have one of the following ContactProfileImage properties selected:
   • Thumbnail File Path
   • Thumbnail Large File Path
   • Image File Path
2. From the Template tab, insert the image data source.
3. Click the HTML tab.
4. Update the data source so that the syntax reads like the following: <img src=" {#query.ThumbnailLargeFilePath}">



5. Click back to the Design tab. The image property will look like a broken image:



6. Continue adding data sources to the Template tab.



7. Save the template. Add the query to content using the Query Template Display content item. See Displaying the query template.

Displaying cards of data using conditional functions

Example: The staff users need a quick view of the members’ information, such as ID, name, company, email, phone numbers, and the last-updated date. In this view, staff users also need an indicator for those who have not had any data updated on their profiles in the last year.

Do the following:

1. Create a query using the NetContactData and ContactProfileImage business objects.
2. Add the following properties to the Display tab:
   • Image File Path
   • Full Name
   • ID
   • Title
   • Home Phone
   • Mobile Phone
   • Work Phone
   • Company
   • Last Updated
   • Is Company
   • Email
3. From the Template tab, add the following conditional statement:
Copy

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
27
28
29
<div class="container-fluid">
                                <h2 class="display-5 fw-bold">{#query.ID} - {#query.FullName}</h2>
                                <div class="mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                <div class="col-md-4">
                                <img src="{#query.ImageFilePath}" alt="" class="img-fluid rounded-start">
                                </div>
                                <div class="col-md-8">
                                <div class="card-body">
                                {if ISFALSE(#query.IsCompany)}<h5 class="card-title">{#query.Company}</h5>{/endif}
                                {if ISNOTNULLOREMPTY(#query.Title)}<h6 class="card-subtitle mb-2 text-muted">{#query.Title}</h6>
                                {/endif}
                                <p class="card-text">
                                {if #query.Email NEQ ''}{#query.Email}</br>{/endif}
                                {if LENGTH(#query.HomePhone) GT 0}Home: {#query.HomePhone}</br>{/endif}
                                {if LENGTH(#query.WorkPhone) GT 0}Work: {#query.WorkPhone}</br>{/endif}
                                {if LENGTH(#query.MobilePhone) GT 0}Mobile: {#query.MobilePhone}</br>{/endif}
                                </p>
                                <p class="card-text">
                                <small class="text-muted">Last updated {#query.LastUpdated}</small>
                                {if (DAYSBETWEEN(#query.LastUpdated, Now) GT 365)} {/endif}
                                </p>
                                </div>
                                </div>
                                </div>
                                </div>
                                <a href="Party.aspx?ID={#query.ID}" class="btn btn-primary btn-lg" role="button" aria-disabled="true">Full Profile</a>
                                </div>
                            </div>

4. Save the query.
5. Add the Query Template Display content item to a content record. See Displaying the query template.

Creating a restricted-access button on website content

In some cases, you may wish to restrict access to content for certain member types. For example, you may only want Chapter members to access the chapter directory on your website. In this scenario, you can create a custom query and use the Query menu content item to create a button that only qualified users have access to.

Creating the custom query

Do the following to create a query that identifies qualified members:

1. Go to RiSE > Intelligent Query Architect > New > Query.
2. Name the query.
3. (Sources tab) Add the following sources:
   1. NetContactData
   2. Chapter
4. (Sources tab) Creating a custom join where NetContactData.Chapter = Chapter.Chapter Code.
5. (Filters tab) Create the following filters:

   Table 1: Filter configurations

   Property	Function	Comparison	Multiple	Value		In Search?
   [NetContactData] Chapter	None	Equal	Enabled	Constant	East Chapter, West Chapter, North Chapter, South Chapter	No
   [NetContactData] Is Member	None	Equal		Constant	Yes
   [NetContactData] Status	None	Equal		Constant	Active
   [NetContactData] Id	None	Equal		Dynamic	Selected ID	No

6. (Display tab) Add the desired display columns.
7. Save the query to a non-system folder.
8. (Template tab) Do the following:
   1. From the HTML tab, enter <p><a href="link" target="_blank" class="TextButton">Button Text Here</a></p>.
   2. Replace "link" with the URL of the page to redirect to. For example, https://<yourwesbite>.com/ContactManagement/Directory.aspx.
   3. Replace “Button Text Here” with the text to display.

   

9. (Security tab) Set the Access mode to Authenticated Users Full Control.
10. Save the query.

Adding the button to content record

After creating the query, add the query to a content record using the Query Template Display content item, which exposes the button.

Do the following to add the button to the content record:

1. Go to RiSE >Page Builder > Manage content.
2. From a shared content folder, click New > Website Content.
3. Add a Title.
4. Select Add content.
5. Open the Utility folder.
6. Select the Query Template Display content item and click OK.
7. From the Source query field, add the query you just created.
8. Enable the Hide when there are no results checkbox.



9. Click OK.
10. Click Save & Publish.

Now, only chapter members have access to the directory. When a non-chapter member navigates to the content record, they do not see the button.