Preface – This post is part of the UI5 Integration Programs series.
Introduction
SAP Qualtrics is an employee management platform which measures employee experience with the help of a survey form. SAP acquired Qualtrics in 2018. One can create a free demo account to create a form that can be integrated via iframe. In case you want to integrate it in a UI5 app based upon any event (like press of button or completion of an operation), then SAP Qualtrics predefined ways.
Prerequisite
- You need to have an account of SAP Qualtrics (click here to create) with authorization to create feedback survey forms
- You need to have access of SAP WebIDE (In case you are integrating in a non UI5 website, you don’t need Web IDE)
- You have already created a survey form in Qualtrics
Types of Qualtrics Integration
You can integrate Qualtrics in UI5 App using following three ways:
- Direct integration of survey form in UI5 using iframe
- UI5 Integration using Qualtrics script (not supported in free accounts)
- UI5 Integration using WebIDE Fiori plugin (not supported in free accounts)
Creating Survey on Qualtrics
Step 01: To create a survey form, login into your Qualtrics account, and create a new project:
Step 02: Create a survey either from scratch or create using template:
Step 03: Give a suitable name to the project:
Step 04: Create your questions and click publish:
Step 05: Once the survey is activated, you will get a link as shown below. This link will be used for iframe purpose.
Step 06: Get the code snippet (not supported in free account), this will be used for script based as well as plugin based integration. To get the code snippet, go to settings and click on deployment, as shown below:
Here, you will see a code snippet, similar to the one shown below:
Steps to Integrate Qualtrics in UI5
1. Direct integration of survey form in UI5 using iframe
Step 01: In above steps, we have received a link of the survey, which looks like this: https://qfreeaccountssjc1.az1.qualtrics.com/jfe/form/SV_3CqJj9JLKoH54ii
Step 02: Go to webIDE and create a simple App.
Step 03: Add following code snippet in the view (nothing is required here in the controller)
<mvc:View controllerName="Test.Test.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="Qualtrics Integration using iFrame">
<content>
<html:iframe height="100%" width="100%" src="https://qfreeaccountssjc1.az1.qualtrics.com/jfe/form/SV_3CqJj9JLKoH54ii"/>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Step 04: Run the App now, you will see the survey loaded within the App. Now as per your requirement, you can add this iframe code either in a Dialog or fragment.
Step 05: Since the code snippet can open up anywhere and in any browser, therefore it is important to make it secure. For that Qualtrics provide something called “HTTP Referer” or “Add a referral website URL”. The purpose is to allow people to take your survey only if they select a survey link included on a specific website.
To do that, go to the survey, and click survey options, and then turn on “Add a referral website URL”. Then enter the base URL of your website or UI5 App.
2. UI5 Integration using Qualtrics script
Step 01: In above steps, we have received the Qualtrics snippet. That will look something like this:
<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->
<script type='text/javascript'>
(function(){var g=function(e,h,f,g){
this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,e=c.length;b<e;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};
this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; expires="+b.toGMTString();document.cookie=a+"="+c+b+"; path=/; "};
this.check=function(){var a=this.get(f);if(a)a=a.split(":");else if(100!=e)"v"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(":"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case "v":return!1;case "r":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(":")),!c}return!0};
this.go=function(){if(this.check()){var a=document.createElement("script");a.type="text/javascript";a.src=g;document.body&&document.body.appendChild(a)}};
this.start=function(){var t=this;"complete"!==document.readyState?window.addEventListener?window.addEventListener("load",function(){t.go()},!1):window.attachEvent&&window.attachEvent("onload",function(){t.go()}):t.go()};};
try{(new g(100,"r","<Unique Code>","<Unique Link>")).start()}catch(i){}})();
</script><div id='ZN_eDoIXhSDN98YlPo'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
<!--END WEBSITE FEEDBACK SNIPPET-->
Step 02: Go to webIDE and create a simple App.
Step 03: Add following code snippet in the controller (nothing is required here in the view). This code can be either written in onInit function or click of an event (like button click event). The snippet you received above will be used here in string format from “var g ..to.. catch(i){}”. So we need to remove the (function(){ from begining and })(); from end.
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("Test.Test.controller.Main", {
onInit: function () {
var snippet = 'var g=function(e,h,f,g){this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,e=c.length;b<e;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; expires="+b.toGMTString();document.cookie=a+"="+c+b+"; path=/; "};this.check=function(){var a=this.get(f);if(a)a=a.split(":");else if(100!=e)"v"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(":"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case "v":return!1;case "r":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(":")),!c}return!0};this.go=function(){if(this.check()){var a=document.createElement("script");a.type="text/javascript";a.src=g;document.body&&document.body.appendChild(a)}};this.start=function(){var t=this;"complete"!==document.readyState?window.addEventListener?window.addEventListener("load",function(){t.go()},!1):window.attachEvent&&window.attachEvent("onload",function(){t.go()}):t.go()};};try{(new g(100,"r","<Unique Code>","<Unique Link>")).start()}catch(i){}';
var functionCall = new Function(snippet);
return (functionCall());
}
});
});
Step 04: Run the App now, you will see the survey loaded within the App.
Step 05: To secure this code snippet, you can load this particular script during runtime. To do that, you need to save this code snippet in the backend in a table in encrypted format and get it during runtime. Once, you get the code, decrypt it and run it.
3. UI5 Integration using WebIDE Fiori plugin
This is the most complex way to integrate Qualtrics in UI5 App. Here, firstly we create a Fiori plugin.
Step 01: Create a Plugin (check how to create a plugin here)
Step 02: In above steps, we have received the Qualtrics snippet. That will look something like this:
<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->
<script type='text/javascript'>
(function(){var g=function(e,h,f,g){
this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,e=c.length;b<e;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};
this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; expires="+b.toGMTString();document.cookie=a+"="+c+b+"; path=/; "};
this.check=function(){var a=this.get(f);if(a)a=a.split(":");else if(100!=e)"v"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(":"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case "v":return!1;case "r":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(":")),!c}return!0};
this.go=function(){if(this.check()){var a=document.createElement("script");a.type="text/javascript";a.src=g;document.body&&document.body.appendChild(a)}};
this.start=function(){var t=this;"complete"!==document.readyState?window.addEventListener?window.addEventListener("load",function(){t.go()},!1):window.attachEvent&&window.attachEvent("onload",function(){t.go()}):t.go()};};
try{(new g(100,"r","QSI_S_ZN_eDoIXhSDN98YlPo","<Unique Link>")).start()}catch(i){}})();
</script><div id='ZN_eDoIXhSDN98YlPo'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
<!--END WEBSITE FEEDBACK SNIPPET-->
Step 03: Now go to the component.js file in the plugin application that you created in step 01, and add that full code in the onInit function.
Step 03: Now save it and run. You will be able to see the feedback button at the corner of the screen something like below:
Now your Fiori plugin is ready to deploy and use in your UI5 Application.
Step 04: Deploy your Fiori Plugin App in WebIDE via SAP Cloud Platform.
Step 05: Now, whenever you will create a Fiori Launchpad, you can add this plugin as an App where App type is selected as Shell Plugin. You can read it in detail here. The plugin on Fiori Launchpad will look like this:
Figure 1: The evolution of the ABAP Programming model
As a developer you might have these questions in mind:
This will create an annotation file within the “LocalService” folder. Also, it will change the metadata as below:
Changes in Manifest File for Adding UI Annotation in custom UI5 App
There are two ways in which we can achieve the above layout: