public static void AddSectionAndAddWebpart()
{
OfficeDevPnP.Core.AuthenticationManager authenticationManager = new OfficeDevPnP.Core.AuthenticationManager();
using (binderSiteClientContext = authenticationManager.GetSharePointOnlineAuthenticatedContextTenant(binderSiteUrl, userName, passWord))
{
//Create a page or get the existing page
string pageName = "POCSiteProvisioning.aspx";
ClientSidePage page = ClientSidePage.Load(binderSiteClientContext, pageName);
//var page = binderSiteClientContext.Web.AddClientSidePage("POCAppProvisioning.aspx", true);
// Add Section
page.AddSection(CanvasSectionTemplate.ThreeColumn, 5);
// get the available web parts - this collection will include OOTB and custom SPFx web parts..
page.Save();
// Get all the available webparts
var components = page.AvailableClientSideComponents();
// add the named web part..
var webPartToAdd = components.Where(wp => wp.ComponentType == 1 && wp.Name == "HeroControl").FirstOrDefault();
if (webPartToAdd != null)
{
ClientSideWebPart clientWp = new ClientSideWebPart(webPartToAdd) { Order = 1 };
//Add the WebPart to the page with appropriate section
page.AddControl(clientWp, page.Sections[1].Columns[1]);
}
// the save method creates the page if one doesn't exist with that name in this site..
page.Save();
}
}
/// <summary>
/// Transforms a classic wiki/webpart page layout into a modern client side page layout
/// </summary>
/// <param name="layout">Source wiki/webpart page layout</param>
public virtual void Transform(PageLayout layout)
{
switch (layout)
{
// In case of a custom layout let's stick with one column as model
case PageLayout.Wiki_OneColumn:
case PageLayout.WebPart_FullPageVertical:
case PageLayout.Wiki_Custom:
case PageLayout.WebPart_Custom:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
return;
}
case PageLayout.Wiki_TwoColumns:
{
page.AddSection(CanvasSectionTemplate.TwoColumn, 1);
return;
}
case PageLayout.Wiki_ThreeColumns:
{
page.AddSection(CanvasSectionTemplate.ThreeColumn, 1);
return;
}
case PageLayout.Wiki_TwoColumnsWithSidebar:
{
page.AddSection(CanvasSectionTemplate.TwoColumnLeft, 1);
return;
}
case PageLayout.WebPart_HeaderRightColumnBody:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.TwoColumnLeft, 2);
return;
}
case PageLayout.WebPart_HeaderLeftColumnBody:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.TwoColumnRight, 2);
return;
}
case PageLayout.Wiki_TwoColumnsWithHeader:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.TwoColumn, 2);
return;
}
case PageLayout.Wiki_TwoColumnsWithHeaderAndFooter:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.TwoColumn, 2);
page.AddSection(CanvasSectionTemplate.OneColumn, 3);
return;
}
case PageLayout.Wiki_ThreeColumnsWithHeader:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.ThreeColumn, 2);
return;
}
case PageLayout.Wiki_ThreeColumnsWithHeaderAndFooter:
case PageLayout.WebPart_HeaderFooterThreeColumns:
case PageLayout.WebPart_HeaderFooter4ColumnsTopRow:
case PageLayout.WebPart_HeaderFooter2Columns4Rows:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.ThreeColumn, 2);
page.AddSection(CanvasSectionTemplate.OneColumn, 3);
return;
}
case PageLayout.WebPart_LeftColumnHeaderFooterTopRow3Columns:
case PageLayout.WebPart_RightColumnHeaderFooterTopRow3Columns:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
page.AddSection(CanvasSectionTemplate.OneColumn, 2);
page.AddSection(CanvasSectionTemplate.ThreeColumn, 3);
page.AddSection(CanvasSectionTemplate.OneColumn, 4);
return;
}
default:
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
return;
}
}
}
public void Transform(Tuple <Pages.PageLayout, List <WebPartEntity> > pageData)
{
// First drop all sections...ensure the default section is gone
page.Sections.Clear();
// Should not occur, but to be at the safe side...
if (pageData.Item2.Count == 0)
{
page.AddSection(CanvasSectionTemplate.OneColumn, 1);
return;
}
var firstRow = pageData.Item2.OrderBy(p => p.Row).First().Row;
var lastRow = pageData.Item2.OrderBy(p => p.Row).Last().Row;
// Loop over the possible rows...will take in account possible row gaps
// Each row means a new section
int sectionOrder = 1;
for (int rowIterator = firstRow; rowIterator <= lastRow; rowIterator++)
{
var webpartsInRow = pageData.Item2.Where(p => p.Row == rowIterator);
if (webpartsInRow.Any())
{
// Determine max column number
int maxColumns = 1;
foreach (var wpInRow in webpartsInRow)
{
if (wpInRow.Column > maxColumns)
{
maxColumns = wpInRow.Column;
}
}
if (maxColumns > 3)
{
LogError(LogStrings.Error_Maximum3ColumnsAllowed, LogStrings.Heading_PublishingLayoutTransformator);
throw new Exception("Publishing transformation layout mapping can maximum use 3 columns");
}
else
{
if (maxColumns == 1)
{
page.AddSection(CanvasSectionTemplate.OneColumn, sectionOrder);
}
else if (maxColumns == 2)
{
// if we've only an image in one of the columns then make that one the 'small' column
var imageWebPartsInRow = webpartsInRow.Where(p => p.Type == WebParts.WikiImage);
if (imageWebPartsInRow.Any())
{
Dictionary <int, int> imageWebPartsPerColumn = new Dictionary <int, int>();
foreach (var imageWebPart in imageWebPartsInRow.OrderBy(p => p.Column))
{
if (imageWebPartsPerColumn.TryGetValue(imageWebPart.Column, out int wpCount))
{
imageWebPartsPerColumn[imageWebPart.Column] = wpCount + 1;
}
else
{
imageWebPartsPerColumn.Add(imageWebPart.Column, 1);
}
}
var firstImageColumn = imageWebPartsPerColumn.First();
var secondImageColumn = imageWebPartsPerColumn.Last();
if (firstImageColumn.Key == secondImageColumn.Key)
{
// there was only one column with images
var firstImageColumnOtherWebParts = webpartsInRow.Where(p => p.Column == firstImageColumn.Key && p.Type != WebParts.WikiImage);
if (firstImageColumnOtherWebParts.Count() == 0)
{
// no other web parts in this column
var orderedList = webpartsInRow.OrderBy(p => p.Column).First();
if (orderedList.Column == firstImageColumn.Key)
{
// image left
page.AddSection(CanvasSectionTemplate.TwoColumnRight, sectionOrder);
}
else
{
// image right
page.AddSection(CanvasSectionTemplate.TwoColumnLeft, sectionOrder);
}
}
else
{
page.AddSection(CanvasSectionTemplate.TwoColumn, sectionOrder);
}
}
else
{
if (firstImageColumn.Value == 1 || secondImageColumn.Value == 1)
{
// does one of the two columns have anything else besides image web parts
var firstImageColumnOtherWebParts = webpartsInRow.Where(p => p.Column == firstImageColumn.Key && p.Type != WebParts.WikiImage);
var secondImageColumnOtherWebParts = webpartsInRow.Where(p => p.Column == secondImageColumn.Key && p.Type != WebParts.WikiImage);
if (firstImageColumnOtherWebParts.Count() == 0 && secondImageColumnOtherWebParts.Count() == 0)
{
// two columns with each only one image...
page.AddSection(CanvasSectionTemplate.TwoColumn, sectionOrder);
}
else if (firstImageColumnOtherWebParts.Count() == 0 && secondImageColumnOtherWebParts.Count() > 0)
{
page.AddSection(CanvasSectionTemplate.TwoColumnRight, sectionOrder);
}
else if (firstImageColumnOtherWebParts.Count() > 0 && secondImageColumnOtherWebParts.Count() == 0)
{
page.AddSection(CanvasSectionTemplate.TwoColumnLeft, sectionOrder);
}
else
{
page.AddSection(CanvasSectionTemplate.TwoColumn, sectionOrder);
}
}
else
{
page.AddSection(CanvasSectionTemplate.TwoColumn, sectionOrder);
}
}
}
else
{
page.AddSection(CanvasSectionTemplate.TwoColumn, sectionOrder);
}
}
else if (maxColumns == 3)
{
page.AddSection(CanvasSectionTemplate.ThreeColumn, sectionOrder);
}
sectionOrder++;
}
}
else
{
// non used row...ignore
}
}
}
static void Main(string[] args)
{
// Update the below variables to use your tenant and account information
//string siteUrl = "https://contoso.sharepoint.com/sites/modernpagedemo";
//string userName = "******";
string siteUrl = "https://bertonline.sharepoint.com/sites/bert1";
string userName = "******";
SecureString password = GetSecureString("Password");
AuthenticationManager am = new AuthenticationManager();
using (var cc = am.GetSharePointOnlineAuthenticatedContextTenant(siteUrl, userName, password))
{
#region Previous demos
/*
* // Demo 1: Add empty page
* var page = cc.Web.AddClientSidePage("PnPRocks.aspx", true);
*
* // Demo 2: Read existing page and Text control + custom web part.
* // Important: manually create a sample modern page called "Templatepage" in your demo site first
* ClientSidePage p = ClientSidePage.Load(cc, "Demo.aspx");
* // Add text control on top
* ClientSideText txt1 = new ClientSideText() { Text = "PnP Rocks" };
* p.AddControl(txt1, -1);
* // Find custom component and add as last control
* // Important: this assumes you've a custom client side web part with name "HelloWorld" deployed to the test site collection.
* var components = p.AvailableClientSideComponents();
* var myWebPart = components.Where(s => s.Name == "HelloWorld").FirstOrDefault();
* if (myWebPart != null)
* {
* ClientSideWebPart helloWp = new ClientSideWebPart(myWebPart) { Order = 10 };
* p.AddControl(helloWp);
* }
* // Save the page under a new name
* p.Save("pagewithcontrols.aspx");
*
* //Demo 3: Add OOB web part (Image)
* // Important: if you don't update the web part properties your client side impage web part will not be able to load the image
* ClientSidePage page5 = new ClientSidePage(cc);
* var imageWebPart = page5.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);
* imageWebPart.Properties["imageSourceType"] = 2;
* imageWebPart.Properties["siteId"] = "c827cb03-d059-4956-83d0-cd60e02e3b41";
* imageWebPart.Properties["webId"] = "9fafd7c0-e8c3-4a3c-9e87-4232c481ca26";
* imageWebPart.Properties["listId"] = "78d1b1ac-7590-49e7-b812-55f37c018c4b";
* imageWebPart.Properties["uniqueId"] = "3C27A419-66D0-4C36-BF24-BD6147719052";
* imageWebPart.Properties["imgWidth"] = 1002;
* imageWebPart.Properties["imgHeight"] = 469;
* //imageWebPart.PropertiesJson = "{\"imageSourceType\":2,\"altText\":\"\",\"fileName\":\"\",\"siteId\":\"c827cb03-d059-4956-83d0-cd60e02e3b41\",\"webId\":\"9fafd7c0-e8c3-4a3c-9e87-4232c481ca26\",\"listId\":\"78d1b1ac-7590-49e7-b812-55f37c018c4b\",\"uniqueId\":\"{3C27A419-66D0-4C36-BF24-BD6147719052}\",\"imgWidth\":1002,\"imgHeight\":469}";
* page5.AddControl(imageWebPart);
* page5.Save("pagewithimage.aspx");
*
* //Demo 4: delete page
* ClientSidePage p2 = ClientSidePage.Load(cc, "pagewithcontrols.aspx");
* p2.Delete();
*
* //Demo 5: delete control
* ClientSidePage deleteDemoPage = ClientSidePage.Load(cc, "pagewithimage.aspx");
* deleteDemoPage.Controls[0].Delete();
* deleteDemoPage.Save();
*/
#endregion
//Demo 6: create a page with a flexible page layout
var page2 = cc.Web.AddClientSidePage("PageWithSections.aspx", true);
page2.AddSection(CanvasSectionTemplate.ThreeColumn, 5);
page2.AddSection(CanvasSectionTemplate.TwoColumn, 10);
var componentsToAdd = page2.AvailableClientSideComponents();
var myHellowWorldWebPart = componentsToAdd.Where(s => s.Name == "HelloWorld").FirstOrDefault();
if (myHellowWorldWebPart != null)
{
ClientSideText text = new ClientSideText()
{
Text = "Text control in first zone, left column"
};
page2.AddControl(text, page2.Sections[0]);
ClientSideWebPart helloWp = new ClientSideWebPart(myHellowWorldWebPart)
{
Order = 10
};
helloWp.Properties["description"] = "Hello world from control 1!!";
helloWp.Properties["test3"] = false;
helloWp.Properties["test2"] = "1";
//description":"HelloWorld","test":"Multi-line text field","test1":true,"test2":"2","test3":true
page2.AddControl(helloWp, page2.Sections[0].Columns[2]);
ClientSideWebPart helloWp2 = new ClientSideWebPart(myHellowWorldWebPart)
{
Order = 10
};
helloWp2.Properties["description"] = "Hello world from control 2!!";
helloWp2.Properties["test3"] = true;
helloWp2.Properties["test2"] = "3";
//description":"HelloWorld","test":"Multi-line text field","test1":true,"test2":"2","test3":true
page2.AddControl(helloWp2, page2.Sections[1]);
}
page2.Save();
// Demo 7: read created page and flip the order of the sections, move web parts around and turn off commenting
var page3 = cc.Web.LoadClientSidePage("PageWithSections.aspx");
// Move web part
page3.Sections[0].Columns[0].Controls[0].Move(page3.Sections[0].Columns[2], 20);
// Move zones
page3.Sections[0].Order = 10;
page3.Sections[1].Order = 5;
ClientSideText text2 = new ClientSideText()
{
Text = "Text control in first zone, middle column"
};
page3.AddControl(text2, page3.Sections[0].Columns[1]);
page3.Save();
// Disable comments for this page
page3.DisableComments();
// Demo 8: create a news page
ClientSidePage page4 = new ClientSidePage(cc);
page4.AddSection(CanvasSectionTemplate.TwoColumn, 10);
ClientSideText text4 = new ClientSideText()
{
Text = "Hello all, this is our first news page."
};
page4.AddControl(text4);
var imageWebPart4 = page4.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);
imageWebPart4.Properties["imageSourceType"] = 2;
imageWebPart4.Properties["siteId"] = "c827cb03-d059-4956-83d0-cd60e02e3b41";
imageWebPart4.Properties["webId"] = "9fafd7c0-e8c3-4a3c-9e87-4232c481ca26";
imageWebPart4.Properties["listId"] = "78d1b1ac-7590-49e7-b812-55f37c018c4b";
imageWebPart4.Properties["uniqueId"] = "3C27A419-66D0-4C36-BF24-BD6147719052";
imageWebPart4.Properties["imgWidth"] = 500;
imageWebPart4.Properties["imgHeight"] = 235;
//imageWebPart.PropertiesJson = "{\"imageSourceType\":2,\"altText\":\"\",\"fileName\":\"\",\"siteId\":\"c827cb03-d059-4956-83d0-cd60e02e3b41\",\"webId\":\"9fafd7c0-e8c3-4a3c-9e87-4232c481ca26\",\"listId\":\"78d1b1ac-7590-49e7-b812-55f37c018c4b\",\"uniqueId\":\"{3C27A419-66D0-4C36-BF24-BD6147719052}\",\"imgWidth\":1002,\"imgHeight\":469}";
page4.AddControl(imageWebPart4, page4.DefaultSection.Columns[1]);
page4.Save("newspage.aspx");
// promote as news
page4.PromoteAsNewsArticle();
// Demo 9: give the site a new home page
var newHomePage = cc.Web.AddClientSidePage();
newHomePage.LayoutType = ClientSidePageLayoutType.Home;
newHomePage.AddSection(CanvasSectionTemplate.ThreeColumn, 10);
newHomePage.AddControl(new ClientSideText()
{
Text = "Having a custom home page"
}, newHomePage.DefaultSection);
newHomePage.AddControl(new ClientSideText()
{
Text = "with multiple columns"
}, newHomePage.DefaultSection.Columns[1]);
newHomePage.AddControl(new ClientSideText()
{
Text = "is possible :-)"
}, newHomePage.DefaultSection.Columns[2]);
newHomePage.Save("Home_2.aspx");
newHomePage.PromoteAsHomePage();
// Demo 10: restore original home page
cc.Web.LoadClientSidePage("Home.aspx").PromoteAsHomePage();
}
}