PnP site template - include 'Embed' webpart with <iframe>

Question

I am provisioning sharepoint sites using a pnp site template and would like to add an embed web part. I am able to add 'people' web parts with the following:

            <pnp:CanvasControl WebPartType="People" JsonControlData="{&quot;id&quot;: &quot;7f718435-ee4d-431c-bdbf-9c4ff326f46e&quot;, &quot;instanceId&quot;: &quot;7aca25b7-b4a9-48e5-a97f-1527a0140b52&quot;, &quot;title&quot;: &quot;People&quot;, &quot;description&quot;: &quot;People&quot;, &quot;dataVersion&quot;: &quot;1.3&quot;, &quot;properties&quot;: {&quot;layout&quot;:1,&quot;persons&quot;:[]}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{&quot;title&quot;:&quot;&quot;},&quot;imageSources&quot;:{},&quot;links&quot;:{}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="7f718435-ee4d-431c-bdbf-9c4ff326f46e" Order="1" Column="3" />

The CanvasControl contains a WebPartType, JsonControlData, ControlId, order and column properties.

Changing the WebPartType to Embed is a given, but where does the <iframe> markup for the embed go?

Answer 1

I reversed engineered it by adding the embed web part to a sharepoint site manually and exporting the template with powershell. The <iframe> markup is included in the JsonControlData as follows (I have removed all Ids):

JsonControlData=


"{&quot;id&quot;: &quot;<id>&quot;,
 &quot;instanceId&quot;: &quot;695e4f54-bebc-43b1-9e4f-1efbe116cda9&quot;,
 &quot;title&quot;: &quot;Bygg inn&quot;, &quot;description&quot;:
 &quot;Bygg inn innhold fra andre områder, for eksempel Sway, YouTube, Vimeo og flere&quot;,
 &quot;dataVersion&quot;: &quot;1.2&quot;,
 &quot;properties&quot;: 
 {
 &quot;embedCode&quot;:&quot;&lt;iframe 
 width=\&quot1024px\&quot;
 height=\&quot;575px\&quot;
 src=\&quot;https://web.powerapps.com/webplayer/iframeapp?source=iframe&amp;
 screenColor=rgba(104,101,171,1)&amp;
 appId=/providers/Microsoft.PowerApps/apps/<PowerAppId>;
 GroupObjectId=<groupid>\&quot;&gt;&lt;/iframe&gt;&quot;,
 &quot;cachedEmbedCode&quot;:&quot;&lt;
 iframe width=\&quot;1024px\&quot;
 height=\&quot;575px\&quot; 
 src=\&quot;https://web.powerapps.com/webplayer/iframeapp?source=iframe&amp;
 screenColor=rgba(104,101,171,1)&amp;
 appId=/providers/Microsoft.PowerApps/apps/<PowerAppId>&amp;
 GroupObjectId=<groupid>\&quot;&gt;&lt;/
 iframe&gt;&quot;,
 &quot;shouldScaleWidth&quot;:true,
 &quot;tempState&quot;:{},
 &quot;thumbnailUrl&quot;:&quot;&quot;,
 &quot;cachedEmbedCodeThumbnail&quot;:&quot;&quot;}, 
 &quot;serverProcessedContent&quot;:
 {&quot;htmlStrings&quot;:{},
 &quot;searchablePlainTexts&quot;:{},
 &quot;imageSources&quot;:{},
 &quot;links&quot;:{}
 },
 &quot;dynamicDataPaths&quot;: {},
 &quot;dynamicDataValues&quot;: {}
 }"

This is not very readable and hard to reproduce so I would recommend to do it by adding it manually and exporting the template.

EDIT: this is my original iframe, for reference:

<iframe width="1024px" height="575px" 
src="https://web.powerapps.com/webplayer/iframeapp?
source=iframe&screenColor=rgba(104,101,171,1)
&appId=/providers/Microsoft.PowerApps/apps/<PowerappId>
&GroupObjectId=<groupid>">
</iframe>