Niklas Wilhelm (hubsite365.com)

Pro User MyRole

Hot News Focus

SharePoint Online

[URL] Worldwide Content Releastionship

<div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;0&#125;,&quot;controlType&quot;&#58;3,&quot;id&quot;&#58;&quot;e9e7afef-5365-428f-8c4d-73401bad44e8&quot;,&quot;webPartId&quot;&#58;&quot;d1d91016-032f-456d-98a4-721247c305e8&quot;,&quot;rteInstanceId&quot;&#58;&quot;bb0abac5-05fa-4cec-aa88-0e5a5ac28820&quot;,&quot;addedFromPersistedData&quot;&#58;true,&quot;reservedHeight&quot;&#58;288,&quot;reservedWidth&quot;&#58;1178&#125;"><div data-sp-webpart="" data-sp-webpartdataversion="1.11" data-sp-webpartdata="&#123;&quot;id&quot;&#58;&quot;d1d91016-032f-456d-98a4-721247c305e8&quot;,&quot;instanceId&quot;&#58;&quot;e9e7afef-5365-428f-8c4d-73401bad44e8&quot;,&quot;title&quot;&#58;&quot;Image&quot;,&quot;description&quot;&#58;&quot;Add an image, picture or photo to your page including text overlays and ability to crop and resize images.&quot;,&quot;audiences&quot;&#58;[],&quot;serverProcessedContent&quot;&#58;&#123;&quot;htmlStrings&quot;&#58;&#123;&#125;,&quot;searchablePlainTexts&quot;&#58;&#123;&#125;,&quot;imageSources&quot;&#58;&#123;&quot;imageSource&quot;&#58;&quot;/sites/M365-CDN/SiteAssets/SitePages/Content-8123/2587856225-ezgif.com-gif-maker.gif&quot;&#125;,&quot;links&quot;&#58;&#123;&#125;,&quot;customMetadata&quot;&#58;&#123;&quot;imageSource&quot;&#58;&#123;&quot;siteId&quot;&#58;&quot;40ef054e-5ec7-4552-ac92-09bbd4faa5e1&quot;,&quot;webId&quot;&#58;&quot;35f81bac-1b1d-4f8c-a038-0302a1a6ae55&quot;,&quot;listId&quot;&#58;&quot;870ffa3e-eb32-4905-82ab-9e57adb99968&quot;,&quot;uniqueId&quot;&#58;&quot;eb613f18-cf01-4982-ace3-3c8bccc3f642&quot;,&quot;width&quot;&#58;600,&quot;height&quot;&#58;262&#125;&#125;&#125;,&quot;dataVersion&quot;&#58;&quot;1.11&quot;,&quot;properties&quot;&#58;&#123;&quot;id&quot;&#58;&quot;4af2c0f1-52ca-4b9f-bac6-61794a73963e&quot;,&quot;linkUrl&quot;&#58;&quot;&quot;,&quot;isInlineImage&quot;&#58;true,&quot;siteId&quot;&#58;&quot;40ef054e-5ec7-4552-ac92-09bbd4faa5e1&quot;,&quot;webId&quot;&#58;&quot;35f81bac-1b1d-4f8c-a038-0302a1a6ae55&quot;,&quot;listId&quot;&#58;&quot;870ffa3e-eb32-4905-82ab-9e57adb99968&quot;,&quot;uniqueId&quot;&#58;&quot;eb613f18-cf01-4982-ace3-3c8bccc3f642&quot;,&quot;imgHeight&quot;&#58;262,&quot;imgWidth&quot;&#58;600,&quot;imageSourceType&quot;&#58;2,&quot;alignment&quot;&#58;&quot;Center&quot;,&quot;fileName&quot;&#58;&quot;ezgif.com-gif-maker.gif&quot;,&quot;fixAspectRatio&quot;&#58;false,&quot;overlayText&quot;&#58;&quot;&quot;,&quot;altText&quot;&#58;&quot;&quot;,&quot;overlayTextStyles&quot;&#58;&#123;&quot;textColor&quot;&#58;&quot;light&quot;,&quot;isBold&quot;&#58;false,&quot;isItalic&quot;&#58;false,&quot;textBoxColor&quot;&#58;&quot;dark&quot;,&quot;textBoxOpacity&quot;&#58;0.54,&quot;overlayColor&quot;&#58;&quot;light&quot;,&quot;overlayTransparency&quot;&#58;0&#125;&#125;&#125;"><div data-sp-componentid="d1d91016-032f-456d-98a4-721247c305e8"></div><div data-sp-htmlproperties=""><img data-sp-prop-name="imageSource" src="/sites/M365-CDN/SiteAssets/SitePages/Content-8123/2587856225-ezgif.com-gif-maker.gif" data-sp-cust-siteId="40ef054e-5ec7-4552-ac92-09bbd4faa5e1" data-sp-cust-webId="35f81bac-1b1d-4f8c-a038-0302a1a6ae55" data-sp-cust-listId="870ffa3e-eb32-4905-82ab-9e57adb99968" data-sp-cust-uniqueId="eb613f18-cf01-4982-ace3-3c8bccc3f642" data-sp-cust-width="600" data-sp-cust-height="262" /></div></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;4,&quot;id&quot;&#58;&quot;bb0abac5-05fa-4cec-aa88-0e5a5ac28820&quot;,&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;1&#125;,&quot;addedFromPersistedData&quot;&#58;true&#125;"><div data-sp-rte=""><p><br></p><div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteClear cke_widget_wrapper_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte" data-cke-display-name="div" data-cke-widget-id="1" role="region" aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane."><div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteClear webPartInRteInlineImage cke_widget_element" data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteClear%22%3A1%2C%22webPartInRteAlignCenter%22%3A1%2C%22webPartInRte%22%3A1%7D%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage" data-instance-id="e9e7afef-5365-428f-8c4d-73401bad44e8" title=""></div></div><p>Did you ever wanted just a quick overview on the current site to get an idea on the structure? Well I've got your inner SharePoint Architect covered ;).</p><p>This Page Web Part pulls all lists and lookups on a site and translate it into an interactive (GoJS) ER Diagram. Additionally it shows a few alerts which might help you to discover issues with your site or lists.​​​​​​​</p><p><strong>Core features are&#58;</strong></p><ul><li>the Data gets cached, to see changes made to the lists/lookups a &quot;refresh&quot; is needed</li><li>alerts/warnings for the lists are displayed as well (Versioning/ItemCount/Threshholdlimit/..)</li><li>easy opt/in/out of alerts and fields</li><li>easy switch between Internal-/DisplayName</li><li>Download current canvas as image</li></ul><p><strong>Github Link (official /pnp/sp-dev-fx-webparts)&#58;</strong>&#160;<a data-cke-saved-href="https&#58;//github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram" href="https&#58;//github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram">https&#58;//github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram</a></p><p><strong>Steps to Install&#58;</strong></p><ul><li>download the repo</li><li>npm install</li><li>gulp bundle --ship</li><li>gulp package-solution --ship</li><li>upload sharepoint/solution/react-pnpjs-spsite-er-diagram.sppkg to your SharePoint AppCatalog</li><li>Add App &quot;react-pnpjs-spsite-er-diagram-client-side-solution&quot; to your site</li><li>Add Page (Apps/SPSite ER Diagram)</li></ul><p><strong>For development&#58;</strong></p><ul><li>steps above +</li><li>/ER-Diagram.aspx?loadSPFX=true&amp;debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests%2Ejs<ul style="margin-left&#58;40px;"><li>on your new Page</li></ul></li></ul></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;0,&quot;pageSettingsSlice&quot;&#58;&#123;&quot;isDefaultDescription&quot;&#58;true,&quot;isDefaultThumbnail&quot;&#58;true,&quot;globalRichTextStylingVersion&quot;&#58;0&#125;&#125;"></div></div>

SharePoint Lists to ER Diagram

Check out how Niklas Wilhelm from hubsite365 transform SharePoint Site Listdata into a beautifull Entity Relationship Diagram with SFPx. Now with Video