Set up ecLearn in Power Pages

To run ecLearn in your Power Pages website, this guide will walk through the following steps:

  1. Configure ecLearn for Power Pages
  2. Create a Site Setting named “ecLearn/ApiUrl”
  3. Create a List titled “My Courses”
  4. Create a Basic Form titled “My Course”
  5. Create a Web Template titled “ecLearn Courses”
  6. Create a Web Template titled “ecLearn Course”
  7. Create a Web Page titled “Courses”
  8. Create a Web Page titled “Course”
  9. Create a Table Permission named “Course Registration”
  10. Create a Table Permission named “Course”
  11. Create a Table Permission named “Course Attempt”

By the end of this guide, you will have configured settings, lists, forms, templates, pages, and permissions to allow a Learner to view and launch their list of assigned courses on your Power Pages website.

Configure ecLearn for Power Pages

In the ecLearn app, navigate to ecLearn Configuration. Fill in the section labeled “Power Pages”. See Install and Configure ecLearn for more details.

Create a Site Setting named “ecLearn/ApiUrl”

In the Power Pages Management app in your Dataverse environment, navigate to Website> Site Settings and create a new Site Setting:

  • Name: ecLearn/ApiUrl
  • Website: your Power Pages website
  • Value: https://api.eclearn.app

Create a List titled “My Courses”

In the Power Pages Management app in your Dataverse environment, navigate to Content > Lists and create a new List:

  • Name: My Courses
  • Table Name: Course Registration (ec_courseregistration)
  • Website: your Power Pages website
  • Views: Available Courses for External Learners
  • Web Page for Details View: Course
  • ID Query String Parameter Name: id
  • Enable Table Permissions: Yes

Create a Basic Form titled “My Course”

In the Power Pages Management app in your Dataverse environment, navigate to Content > Basic Forms and create a new Basic Form:

  • Name: My Course
  • Table Name: Course Registration (ec_courseregistration)
  • Form Name: Web Form
  • Mode: ReadOnly
  • Record Source Type: Query String
  • Record ID Parameter Name: id
  • Website: your Power Pages website
  • Enable Table Permissions: Yes

Create a Web Template titled “ecLearn Courses”

In the Power Pages Management app in your Dataverse environment, navigate to Content > Web Templates and create a new Web Template:

  • Name: ecLearn Courses
  • Website: your Power Pages website
  • Source:
<div class="row">
    <div class="col-md-6">
        {% chart id:"988f9c60-1554-ea11-a811-000d3af42f4a" viewid:"4ba45025-9252-ea11-a811-000d3af42f4a" %}
    </div>
    <div class="col-md-6">
        {% chart id:"c5d6cf45-9952-ea11-a811-000d3af42f4a" viewid:"4ba45025-9252-ea11-a811-000d3af42f4a" %}
    </div>
</div>
<div class="row" style="margin-bottom:30px;">
    <div class="col-md-12">
        {% include "entity_list" key:"My Courses" %}
    </div>
</div>

Create a Web Template titled “ecLearn Course”

In the Power Pages Management app in your Dataverse environment, navigate to Content > Web Templates and create a new Web Template:

  • Name: ecLearn Course
  • Website: your Power Pages website
  • Source:
{% assign id = request.params['id'] %}
{% assign reg = entities.ec_courseregistration[id] %} 
{% assign course = entities.ec_course[reg.ec_courseid.id] %}
<h1>{{ course.ec_name }}</h1>
<p class="h4">{{ course.ec_description | newline_to_br }}</p>
<div>
    <button type="button" id="launch" class="btn btn-primary" style="float:right">Launch Course</button>
    {% entityform name: 'My Course' %}
    <script>
    var button = document.getElementById("launch");

    button.addEventListener("click", function () {
        fetch("/_services/auth/token", { method: "POST" }).then(function (response) {
            response.text().then(function (token) {
                console.log("token", token);

                var registrationId = '{{ request.params["id"] }}';
                var redirectUrl = window.encodeURIComponent(window.location.href);
                var url = '{{ settings["ecLearn/ApiUrl"]}}/Registration/' + registrationId + "/GetLaunchLink?redirect=" + redirectUrl;
                var organizationid = "{{ request.params['orgid'] }}";
                fetch(url, {
                    headers: {
                        "Authorization": "Bearer " + token,
                        "ec-organizationid": organizationid,
                        "ec-source": "PowerPages",
                    }
                }).then(function (response) {
                    response.text().then(function (link) {
                        console.log("link", link);        
                    });
                });
            });
        });
    });
    </script>
<div>

Create a Web Page titled “Courses”

In the Power Pages Management app in your Dataverse environment, navigate to Content > Web Pages and create a new Web Page.

Parent Page

  • Name: Courses
  • Website: your Power Pages website
  • Parent Page: Home (or any other page you wish)
  • Partial URL: courses
  • Page Template: Default Studio Template (or any template you wish)
  • Publishing State: Published

Content Page

  • Title: My Courses
  • Copy (HTML): 
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
  <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
    <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
      <h1 style="text-align: left;">{{ page.title }}</h1>
    </div>
  </div>
</div>
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
  <div class="container" style="width:100%">
    <div class="col-md-12 columnBlockLayout" style="">{% include 'ecLearn Courses' %}</div>
  </div>
</div>

Create a Web Page titled “Course”

In the Power Pages Management app in your Dataverse environment, navigate to Content > Web Pages and create a new Web Page.

Parent Page

  • Name: Course
  • Website: your Power Pages website
  • Parent Page: Courses (created above)
  • Partial URL: course
  • Page Template: Default Studio Template (or any template you wish)
  • Publishing State: Published

Content Page

  • Title: Course
  • Copy (HTML):
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
  <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
    <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
      {% include 'ecLearn Course' %}
    </div>
  </div>
</div>

Create a Table Permission named “Course Registration”

In the Power Pages Management app in your Dataverse environment, navigate to Security> Table Permissions and create a new Table Permission.

  • Name: Course Registration
  • Table Name: Course Registration (ec_courseregistration)
  • Website: your Power Pages website
  • Access Type: Contact
  • Contact Relationship: ec_courseregistration_learnercontact
  • Privileges: Read
  • Web Roles: Authenticated Users (or whichever web role you choose)

Create a Table Permission named “Course”

In the Power Pages Management app in your Dataverse environment, navigate to Security> Table Permissions and create a new Table Permission.

  • Name: Course
  • Table Name: Course (ec_course)
  • Website: your Power Pages website
  • Access Type: Parent
  • Parent Relationship: Course Registrations (ec_courseregistration_course)
  • Privileges: Read

Create a Table Permission named “Course Attempt”

In the Power Pages Management app in your Dataverse environment, navigate to Security> Table Permissions and create a new Table Permission.

  • Name: Course Attempt
  • Table Name: Course Attempt (ec_courseattempt)
  • Website: your Power Pages website
  • Access Type: Parent
  • Parent Relationship: ec_courseattempt_courseregistration
  • Privileges: Read
Back to top