SPFx and HTML Imports (from Web Components)

%3CLINGO-SUB%20id%3D%22lingo-sub-1074640%22%20slang%3D%22en-US%22%3ESPFx%20and%20HTML%20Imports%20(from%20Web%20Components)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1074640%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20been%20looking%20for%20an%20alternative%20to%20using%20an%20%3CIFRAME%3E%20in%20the%20web%20part%20I%20am%20working%20on.%20The%20web%20part%20(%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3BApp%20Panel%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3B)%20is%20meant%20to%20have%20replaceable%20content%20display%20depending%20on%20how%20it%20is%20configured.%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%20The%20idea%20is%20a%20sort%20of%20%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3B%2339%3Bmini-dashboard%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3B%2339%3B%20for%20a%20line%20of%20business%20(LOB)%20application%2C%20where%20the%20replaceable%20content%20provides%20a%20data%20point%20or%20two%20and%20maybe%20button%20for%20a%20pop-up%20with%20some%20more%20info.%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%20The%20name%20of%20the%20app%20and%20a%20direct%20link%20to%20it%20will%20be%20set%20as%20properties%20(displayed%20top%20and%20bottom)%2C%20but%20I%20need%20some%20way%20to%20get%20current%20content%20for%20the%20current%20user%20to%20display%20in%20the%20middle.%20(see%20the%20B%20section%20in%20the%20illustration)%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Bspan%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20233px%3B%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Bimg%20src%3D%22%26amp%3Bamp%3Bamp%3Blt%3Ba%20href%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F162588iB4DDA1B45DA7AF52%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bpx%3D999%22%20target%3D%22_blank%22%26amp%3Bamp%3Bamp%3Bgt%3Bhttps%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F162588iB4DDA1B45DA7AF52%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bpx%3D999%26amp%3Bamp%3Bamp%3Blt%3B%2Fa%26amp%3Bamp%3Bamp%3Bgt%3B%22%20alt%3D%22App-Panel-Breakdown.png%22%20title%3D%22App-Panel-Breakdown.png%22%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2Fspan%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BMy%20original%20thought%20was%20to%20use%20an%20%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Biframe%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%20pointing%20to%20another%20page%20on%20the%20site%20(no%20CORS%20needed)%20that%20the%20user%20would%20never%20visit%20by%20itself%2C%20but%20getting%20it%20to%20look%20right%20would%20be%20challenging.%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%20But%20then%20I%20came%20across%20the%20idea%20of%20using%20%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BA%20href%3D%22%26amp%3Bamp%3Bamp%3Blt%3Ba%20href%3D%22https%3A%2F%2Fwebagility.com%2Fposts%2Fweb-components-vs-iframes%22%20target%3D%22_blank%22%26amp%3Bamp%3Bamp%3Bgt%3Bhttps%3A%2F%2Fwebagility.com%2Fposts%2Fweb-components-vs-iframes%26amp%3Bamp%3Bamp%3Blt%3B%2Fa%26amp%3Bamp%3Bamp%3Bgt%3B%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BHTML%20Imports%20as%20an%20alternative%20to%20iframe%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FA%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B.%20This%20is%20part%20of%20the%20%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BA%20href%3D%22%26amp%3Bamp%3Bamp%3Blt%3Ba%20href%3D%22https%3A%2F%2Fwww.webcomponents.org%2F%22%20target%3D%22_blank%22%26amp%3Bamp%3Bamp%3Bgt%3Bhttps%3A%2F%2Fwww.webcomponents.org%2F%26amp%3Bamp%3Bamp%3Blt%3B%2Fa%26amp%3Bamp%3Bamp%3Bgt%3B%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%22%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BWeb%20Components%20spec%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FA%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%20that%20is%20not%20the%20web%20components%20themselves.%20The%20basic%20concept%20is%20to%20specify%20a%20%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Bdiv%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%20on%20another%20page%20and%20be%20able%20to%20insert%20that%20one%20into%20a%20%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Bdiv%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%20in%20my%20web%20part%20at%20run%20time.%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BWhat%20I%20would%20like%20to%20do%20is%20create%20a%20web%20part%20that%20generates%20the%20content%20I%20want%20to%20display%20on%20a%20new%20page%20in%20the%20site%2C%20and%20then%20use%20the%20HTML%20Imports%20to%20get%20that%20generated%20%26amp%3Bamp%3Bamp%3Bamp%3Blt%3Bdiv%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%20and%20host%20it%20in%20my%20App%20Panel%20web%20part.%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%20This%20would%20essentially%20de-couple%20each%20App%20Panel%20from%20the%20LOB%20application%20that%20is%20providing%20the%20content%2C%20and%20allow%20me%20to%20add%20new%20LOB%20apps%20as%20time%20goes%20on%20without%20having%20to%20add%2Fchange%20the%20code%20and%20re-deploy%20the%20App%20Panel%20web%20part%20itself.%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BMy%20Google-fu%20has%20failed%20me%20when%20attempting%20to%20find%20information%20about%20using%20HTML%20Imports%20in%20the%20context%20of%20the%20SharePoint%20Framework.%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%20Does%20anyone%20know%20if%20this%20is%20even%20possible%2C%20and%20if%20so%20how%20it%20might%20be%20accomplished%3F%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bnbsp%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3BThanks%20in%20advance.%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2Flingo-body%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%3C%2FIFRAME%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I've been looking for an alternative to using an <iframe/> in the web part I am working on. The web part ("App Panel") is meant to have replaceable content display depending on how it is configured.  The idea is a sort of 'mini-dashboard' for a line of business (LOB) application, where the replaceable content provides a data point or two and maybe button for a pop-up with some more info.  The name of the app and a direct link to it will be set as properties (displayed top and bottom), but I need some way to get current content for the current user to display in the middle. (see the B section in the illustration)

App-Panel-Breakdown.png

My original thought was to use an <iframe/> pointing to another page on the site (no CORS needed) that the user would never visit by itself, but getting it to look right would be challenging.  But then I came across the idea of using HTML Imports as an alternative to iframe. This is part of the Web Components spec that is not the web components themselves. The basic concept is to specify a <div> on another page and be able to insert that one into a <div> in my web part at run time.

 

What I would like to do is create a web part that generates the content I want to display on a new page in the site, and then use the HTML Imports to get that generated <div> and host it in my App Panel web part.  This would essentially de-couple each App Panel from the LOB application that is providing the content, and allow me to add new LOB apps as time goes on without having to add/change the code and re-deploy the App Panel web part itself.

 

My Google-fu has failed me when attempting to find information about using HTML Imports in the context of the SharePoint Framework.  Does anyone know if this is even possible, and if so how it might be accomplished?

 

Thanks in advance.

0 Replies