- SAP Managed Tags:
Qualtrics XM Platform provides an extensive set of methods and tools to improve the customer experience along their journey.
Lately, my colleague Alessandro, Villamaina, and me have been working on a project using Qualtrics XM as our development platform.
We came across few restrictions and thought of addressing the them to the larger audience. We are sharing the insights and learnings, which we have attained over a period while intensively working with Qualtrics XM.
In this blog post, we will describe a technical overview of generating Microsoft PowerPoint slides using Qualtrics XM Platform.
Background: Our requirement was to display documents to the end users in a format that wasn't directly achievable in Qualtrics XM. So, we decided to code the document in html/javascript and then to generate Microsoft PowerPoint slide from the same content.
1. In Qualtrics XM survey section, click on "Add Block"-> select "Create New Question"-> select descriptive text, copy-paste html code as shown below:
html view of above code :
2. Add the following Javascript code in your Qualtrics XM question. This code will execute on click of button after the page is fully displayed.
/*Below code can also be added in header incase you would like to reuse it */
3. We used the following open source libraries available here, as survey header as shown below :
Conclusion:
Once the above steps are completed, preview the survey and on button click, a Microsoft PowerPoint slide is generated using Qualtrics XM Survey.
Lately, my colleague Alessandro, Villamaina, and me have been working on a project using Qualtrics XM as our development platform.
We came across few restrictions and thought of addressing the them to the larger audience. We are sharing the insights and learnings, which we have attained over a period while intensively working with Qualtrics XM.
In this blog post, we will describe a technical overview of generating Microsoft PowerPoint slides using Qualtrics XM Platform.
Background: Our requirement was to display documents to the end users in a format that wasn't directly achievable in Qualtrics XM. So, we decided to code the document in html/javascript and then to generate Microsoft PowerPoint slide from the same content.
Process Walkthrough
1. In Qualtrics XM survey section, click on "Add Block"-> select "Create New Question"-> select descriptive text, copy-paste html code as shown below:
<strong><span style="color:#e35500;"><span id="card" style="font-weight: bolder;"><span style="font-size: 24px;">Microsoft PowerPoint Slide Generation</span></span></span></strong>
<table cellpadding="5" class="UserTable" style="width:100%">
<tbody>
<tr>
<td style="background-color: rgb(0, 143, 211);"><span style="font-size:19px;"><strong><span style="color:#ffffff;">Purpose</span></strong></span></td>
</tr>
</tbody>
</table>
<br>
<span id="purpose">Welcome this blog will help you generating Microsoft PowerPoint slide using Qualtrics XM</span><br>
<table class="UserTable" style="width:100%; border:undefined">
<tbody>
<tr>
<td style="background-color: rgb(0, 143, 211);"><span style="font-size:19px"><strong><span style="color:#ffffff">Features</span></strong></span></td>
</tr>
</tbody>
</table>
<div id="keyFeatures">
<ul>
<li>Test Content</li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
</ul>
</div>
<table class="UserTable" style="width:100%; border:undefined"><tbody><tr><td style="background-color: rgb(0, 143, 211);"><span style="font-size:19px"><font color="#ffffff"><b> Assets</b></font></span></td>
</tr>
</tbody>
</table>
<u>Checks</u>
<div id="Assets">
<ul>
<li>Test Content</li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
</ul>
</div>
<table cellpadding="5" class="UserTable" style="width:100%">
<tbody>
<tr>
<td style="background-color: rgb(0, 143, 211);"><span style="font-size:19px;"><strong><span style="color:#ffffff;">Solution Dependencies</span></strong></span></td>
</tr>
</tbody>
</table>
<div id="Dependencies">
<ul>
<li><strong>SAP</strong></li>
<li><strong>SAP</strong></li>
</ul>
</div>
<table cellpadding="5" class="UserTable" style="width:100%">
<tbody>
<tr>
<td style="background-color: rgb(0, 143, 211);"><span style="font-size:19px;"><strong><span style="color:#ffffff;">Use Cases</span></strong></span></td>
</tr>
</tbody>
</table>
<div id="UseCases">
<ul>
<li>Test Content</li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
<li><a href="https://help.sap.com/" target="_blank">Test Link</a></li>
</ul>
</div>
html view of above code :
2. Add the following Javascript code in your Qualtrics XM question. This code will execute on click of button after the page is fully displayed.
var buttons = jQuery('#Buttons');
buttons.css('display', 'flex');
buttons.css('justify-content', 'space-between');
jQuery('<input type="button" id="NextButton" style="background-color: #e35500;" value="Download as Powerpoint" onClick="dlPptx();">').insertBefore(buttons.children().last());/*Below code can also be added in header incase you would like to reuse it */
function dlPptx() {
const e = 7;
let t = new PptxGenJS();
(t.layout = "LAYOUT_WIDE"),
t.defineSlideMaster({
title: "SUCCESS",
bkgd: "FFFFFF",
objects: [
{ text: { text: "SAP BLOG", options: { x: 0.4, y: 0.27, w: 12.23, h: 0.63, fontFace: "Arial (headings)", fontSize: 16, bold: !0, color: "595959" } } },
{ text: { text: "Suggested CODE FOR PPT CREATION", options: { x: 0.4, y: 0.6, w: 12.23, h: 0.63, fontFace: "Arial (Headings)", fontSize: 22, bold: !0, color: "F0AB00" } } },
{ text: { text: "© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ CONFIDENTIAL", options: { x: 0.4, y: 7.14, fontFace: "Arial", fontSize: 9, color: "000000" } } },
],
slideNumber: { x: 12.62, y: 7.14, w: 0.15, h: 0.15, fontFace: "Arial", fontSize: 9 },
});
let o = t.addSlide({ masterName: "PLAN" });
o.addText(jQuery("#card").text(), { x: "3%", y: "11%", w: 12.23, h: 0.8, fontSize: 20, fontFace: "Arial", bold: !0, color: "E35500" });
var r = [];
r.push([{ text: "Purpose", options: { border: { type: "solid", pt: "1" }, fontFace: "Arial", fontSize: 16, fill: "F2F2F2", color: "404040", bold: !0, align: "center", valign: "middle" } }]);
var l = jQuery("#purpose").text();
function i(t) {
var o = jQuery("#" + t + " > ul > li"),
l = o.length;
if (
(o.each(function (t) {
var o = jQuery(this).children(),
i = null,
n = null;
0 == o.size() ? (i = jQuery(this).text()) : ((i = o.first().text()), (n = o.first().attr("href")));
var a = 0;
(a = l < e ? 0 : t == l - 1 ? 1 : 0),
null == n
? r.push([{ text: i, options: { border: [{ pt: 0 }, { pt: 1 }, { pt: a }, { pt: 1 }], margin: [7, 4, 1, 10], fontFace: "Arial", fontSize: 12, color: "000000", fill: "FFFFFF", bullet: !0 } }])
: r.push([{ text: i, options: { border: [{ pt: 0 }, { pt: 1 }, { pt: a }, { pt: 1 }], margin: [7, 4, 1, 10], fontFace: "Arial", fontSize: 12, color: "000000", fill: "FFFFFF", bullet: !0, hyperlink: { url: n } } }]);
}),
l < e)
)
for (var i = 1; i <= 7 - l; i++)
(bdr = i == e - l ? 1 : 0), r.push([{ text: " ", options: { border: [{ pt: 0 }, { pt: 1 }, { pt: bdr }, { pt: 1 }], margin: [7, 4, 1, 10], fontFace: "Arial", fontSize: 12, color: "000000", fill: "FFFFFF" } }]);
return r;
}
r.push([{ text: l, options: { margin: 10, fontFace: "Arial", fontSize: 12, fill: "FFFFFF", color: "000000" } }]),
o.addTable(r, { border: { type: "solid", pt: "1" }, x: "4%", y: "21%", w: "65%", h: "100%", rowH: [0.2, 2.18] }),
(r = []).push([{ text: "Dependencies", options: { fontFace: "Arial", fontSize: 16, fill: "F2F2F2", color: "404040", bold: !0, align: "center", valign: "middle" } }]),
(r = i("Dependencies")),
o.addTable(r, { border: { type: "solid", pt: "1" }, x: "70%", y: "21%", w: "28%", h: "20%", rowH: 0.1 }),
(r = []).push([{ text: "Key Features", options: { border: { type: "solid", pt: "1" }, fontFace: "Arial", fontSize: 16, fill: "F2F2F2", color: "404040", bold: !0, align: "center", valign: "middle" } }]),
(r = i("keyFeatures")),
o.addTable(r, { border: { type: "none" }, x: "4%", y: "57%", w: "30%", h: "20%", rowH: 0.1 }),
(r = []).push([{ text: "Assets", options: { border: { type: "solid", pt: "1" }, fontFace: "Arial", fontSize: 16, fill: "F2F2F2", color: "404040", bold: !0, align: "center", valign: "middle" } }]),
(r = i("Assets")),
o.addTable(r, { border: { type: "none" }, x: "35%", y: "57%", w: "34%", h: "20%", rowH: 0.1 }),
(r = []).push([{ text: "Use Cases", options: { border: { type: "solid", pt: "1" }, fontFace: "Arial", fontSize: 16, fill: "F2F2F2", color: "404040", bold: !0, align: "center", valign: "middle" } }]),
(r = i("UseCases")),
o.addTable(r, { border: { type: "none" }, x: "70%", y: "57%", w: "28%", h: "20%", rowH: 0.1 }),
t.writeFile("Sample Presentation.pptx");
}3. We used the following open source libraries available here, as survey header as shown below :
Conclusion:
Once the above steps are completed, preview the survey and on button click, a Microsoft PowerPoint slide is generated using Qualtrics XM Survey.
