Leveraging Khoros Communities Aurora's powerful GraphQL API in your Page Scripts can add a dynamic flair to your community's scripted features. It enables you to pull contextual information from the database and utilize it to provide your members with an experience customized to their specific profiles.

To get you started, we'll walk you through embedding a personalized survey modal on a custom page in Khoros Communities Aurora. You'll learn how to integrate a GraphQL query inside a Handlebars template, dynamically inject a user's name into the modal title, and control the modal behavior using JavaScript.

This is just one of many potential use cases for this functionality. Let's dive into things.

Organize your custom script files like this:

pagescripts/
└── formSurvey/
    ├── queries/
    │   └── GetUser.query.graphql
    ├── formSurvey.js
    ├── formSurvey.hbs
    └── formSurvey.script.json

Implementation Details

GraphQL Query (GetUser.query.graphql)

Define the query to fetch the currently logged-in user's id and name:

query GetUser {
  user {
    id
    name
  }
}

Handlebars Template (formSurvey.hbs)

Use the #gql directive to include the GraphQL data inside the template:

#gql "GetUser"
<div id="survey-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <span class="close-button" onclick="closeSurveyModal()">×</span>
    <h2>Personalized survey for {{user.name}}</h2>
    <iframe
      src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
      width="100%"
      height="500"
      frameborder="0"
      marginheight="0"
      marginwidth="0">
      Loading…
    </iframe>
  </div>
</div>
/gql

Replace YOUR_FORM_ID with your actual Google Form ID.

JavaScript File (formSurvey.js)

Create JavaScript functions to handle opening and closing the modal:

function openSurveyModal() {
  const modal = document.getElementById('survey-modal');
  modal.style.display = 'block';
}

function closeSurveyModal() {
  const modal = document.getElementById('survey-modal');
  modal.style.display = 'none';
}

// Example: Open the modal after a delay on page load
window.onload = function () {
  setTimeout(() => {
    openSurveyModal();
  }, 3000); // 3 seconds
};

Script Definition (formSurvey.script.json)

Link the Handlebars template, JavaScript, and GraphQL query in the script manifest:

{
  "name": "formSurvey",
  "template": "formSurvey.hbs",
  "javascript": "formSurvey.js",
  "queries": ["queries/GetUser.query.graphql"]
}

Modal Styling (CSS)

Example CSS for basic modal styling:

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  border-radius: 8px;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
}

You can place this styling inline in the Handlebars file or add it via your site's global or page-specific CSS.

How It Works

Step	Description
Fetch User Data	The GetUser GraphQL query fetches the logged-in user's name.
Render Modal	The modal title uses {{user.name}} to dynamically display the user's name.
Embed Survey	A Google Form is embedded in the modal via an <iframe>.
Trigger Modal	JavaScript displays the modal after a short delay (customizable).
Close Modal	Users can manually close the modal via a "×" button.

Best Practices

• Security: Ensure user data is handled securely; limit visible sensitive information.
• Performance: Keep modal assets lightweight to avoid slow page loads.
• Customization: Based on your community needs, modify when and how the modal triggers (e.g., trigger after specific actions, not just time-based).
• Accessibility: Make sure the modal meets accessibility standards (e.g., focus management, keyboard navigation).

Related Resources

• Using GraphQL Queries in Handlebars Templates