ClientSideWebPart

The ClientSideWebPart element should contain the webpart data json. The webpart data can be obtained as follows:

create a modern page in SharePoint
configure the webpart as you require and save the page
add “?maintenanceMode=true” to the url in the address bar (i.e.: /SitePages/samplePage.aspx?maintenanceMode=true)
the webpart data is shown on the Data tab:

Figure 1: Data tab

copy the json and paste it inside the ClientSideWebpart element, make sure xml illegal characters are escape for example < and > should become < and > respectively:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


<Site Url="{url}" Title="{title}" OwnerLogin="{siteowner}" Template="STS#3" LCID="1033" StorageQuota="1024" TimeZoneId="4">
    <RootWeb Title="{title}" Url="{url}" Description="{description}" LCID="1033">
        <Properties>
            <Property Name="WebTemplate">ModernSite</Property>
            <Property Name="WebTemplateVersion">1.0.0.0</Property>
        </Properties>
        <ClientSidePages>
            <ClientSidePage Name="ModernPage1.aspx" HeaderAuthor="megan.bowen@contoso.onmicrosoft.com" HeaderImageUrl="/sites/ModernPage/SiteAssets/sample-image.jpg" Promoted="PromoteOnPublish" >
            </ClientSidePage>
            <ClientSidePage Name="ModernPage2.aspx" HeaderAuthor="megan.bowen@contoso.onmicrosoft.com" HeaderImageUrl="/sites/ModernPage/SiteAssets/sample-image.jpg" Promoted="NotPromoted" >
                <Sections>
                    <Section SectionBackgroundColor="Strong" SectionTemplate="ThreeColumn">
                        <ClientSideWebpart Column="3" Order="1">
                            {
                            "id": "d1d91016-032f-456d-98a4-721247c305e8",
                            "instanceId": "14a834d6-7a90-46ff-bd09-0092aba65a4a",
                            "title": "Afbeelding",
                            "description": "Afbeelding weergeven op de pagina",
                            "serverProcessedContent": {
                            "htmlStrings": {},
                            "searchablePlainTexts": {
                            "captionText": ""
                            },
                            "imageSources": {
                            "imageSource": "/sites/ModernPage/SiteAssets/sample-image.jpg"
                            },
                            "links": {
                            "linkUrl": null
                            },
                            "customMetadata": {
                            "imageSource": {
                            "siteid": "ac444f9b-e635-4524-a689-0c23b572b8b3",
                            "webid": "a34971b7-c49f-4967-9dfe-4d63ae187607",
                            "listid": "4b67d46e-4703-4549-8139-bb43a7b3304d",
                            "uniqueid": "4f086d55-40ab-448c-83a0-c24915b97012",
                            "width": "320",
                            "height": "243"
                            }
                            }
                            },
                            "dataVersion": "1.8",
                            "properties": {
                            "imageSourceType": 2,
                            "altText": "",
                            "overlayText": "",
                            "siteId": "ac444f9b-e635-4524-a689-0c23b572b8b3",
                            "webId": "a34971b7-c49f-4967-9dfe-4d63ae187607",
                            "listId": "4b67d46e-4703-4549-8139-bb43a7b3304d",
                            "uniqueId": "4f086d55-40ab-448c-83a0-c24915b97012",
                            "imgWidth": 320,
                            "imgHeight": 243,
                            "fixAspectRatio": false
                            }
                            }
                        </ClientSideWebpart>
                    </Section>
                </Sections>
            </ClientSidePage>
        </ClientSidePages>
    </RootWeb>
</Site>

ClientSideWebPart

ClientSideWebPart

ClientSideWebPart

What's on this Page