Hi,
I have developed a SPFX Web Part. I would like it to be embedded in a specific page layout "MyCustomLayout" so that anyone who create a page using this page layout will see the SPFX Web Part without manually adding it.
To do so, I have tried different approaches :
First approach :
- I added my SPFX Web Part to a test page
- I configured it as needed
- I exported the Web Part to my local computer
- I uploaded it into the Web Parts Gallery located on the site collection settings
- I tried to generate my SPFX Web Part's html snippet using Design Manager (to insert it into MyCustomLayout.htm afterwards)
Unfortunately, I got an error message while attempting to generate the html snippet.
Sorry, something went wrong
An unexpected error has occurred.
Second approach :
I created a new Web Part zone in MyCustomLayout.html and I inserted into it the SPFX Web Part Xml Definition as shown below:
<div><!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="WPZ_SecondGenericContent" FrameType="TitleBarOnly" Orientation="Vertical">--><!--MS:<ZoneTemplate>--><webParts><webPart xmlns="http://schemas.microsoft.com/WebPart/v3"><metaData><type name="Microsoft.SharePoint.WebPartPages.ClientSideWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" /><importErrorMessage>Cannot Import WebPart</importErrorMessage></metaData><data><properties><property name="AllowZoneChange" type="bool">True</property><property name="HelpUrl" type="string" /><property name="Hidden" type="bool">False</property><property name="MissingAssembly" type="string">Cannot Import WebPart</property><property name="Description" type="string">This Web Part will help you to view the current page's associated page</property><property name="AllowHide" type="bool">True</property><property name="AllowMinimize" type="bool">True</property><property name="ExportMode" type="exportmode">All</property><property name="Title" type="string">Subpage Viewer</property><property name="TitleUrl" type="string" /><property name="ClientSideWebPartData" type="string"><div data-sp-webpart="" data-sp-webpartdataversion=1.0 data-sp-webpartdata="&#123;&quot;id&quot;&#58;&quot;dc8c23c0-8cd8-495e-83f9-ccaa17fcfb30&quot;,&quot;instanceId&quot;&#58;null,&quot;title&quot;&#58;&quot;MSC Subpage Viewer&quot;,&quot;description&quot;&#58;&quot;This Web Part will help you to view the current page's associated page&quot;,&quot;version&quot;&#58;&quot;0.0.1&quot;,&quot;properties&quot;&#58;&#123;&quot;description&quot;&#58;&quot;&quot;&#125;,&quot;htmlProperties&quot;&#58;null&#125;" data-sp-splinksapplied=true><div data-sp-componentid="">dc8c23c0-8cd8-495e-83f9-ccaa17fcfb30</div><div data-sp-htmlproperties=""></div></div></property><property name="ChromeType" type="chrometype">None</property><property name="AllowConnect" type="bool">True</property><property name="Width" type="string" /><property name="Height" type="string" /><property name="CatalogIconImageUrl" type="string" /><property name="HelpMode" type="helpmode">Modeless</property><property name="ClientSideWebPartId" type="System.Guid, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">dc8c23c0-8cd8-495e-83f9-ccaa17fcfb30</property><property name="AllowEdit" type="bool">True</property><property name="TitleIconImageUrl" type="string" /><property name="Direction" type="direction">NotSet</property><property name="AllowClose" type="bool">True</property><property name="ChromeState" type="chromestate">Normal</property></properties></data></webPart></webParts><!--ME:</ZoneTemplate>--<!--ME:</WebPartPages:WebPartZone>--></div>
It did not work either. I got an error message while accessing a SharePoint Page using MyCustomLayout Page Layout.
Sorry, something went wrong. An unexpected error has occurred.
I don't know what I did wrong for both approaches. That's why I am asking you for help.
Is that possible to add my SPFX Web Part using JavaScript Code embedded inMyCustomLayout.html ?
Is there any other way ?
What is the best option to go for to achieve my requirement ?
Thanks,
Regards,
Kabylie
arioule