How to add a banner with a logo image

[tonyvperez]

Has anyone been able to add a Banner (Title) WebPart with their own image (not default) to an existing page? I have tried the following, but it doesn't appear to work:

using (var context = await pnpContextFactory.CreateAsync(new Uri(this.siteUri)))
{
    var bannerPart = new BannerWebPart(
                    "/sites/0758d12c-0ca1-4dc1-92b8-517913d1cf59/SiteAssets/logo.jpeg",
                    2, 
                    context.Site.Id,
                    context.Web.Id, 
                    logoFile.UniqueId, 
                    new Guid("899c24c5-ace5-435c-aef1-2b32e83f3222"),
                    "Case 123456", 
                    true, 
                    false,
                    "DL", 
                    true, 
                    "FullWidthImage", 
                    "Left",
                    1024,
                    1024,
                    string.Empty,
                    new (){
                        new Author("i:0#.f|membership|***@daatphoenix.com", "***@daatphoenix.com", "***@daatphoenix.com", "Information", string.Empty),
                    },
                    new () {"i:0#.f|membership|***@daatphoenix.com"},
                    true);

  bannerWebPart.PropertiesJson = System.Text.Json.JsonSerializer.Serialize(bannerPart);
  bannerWebPart.SetPublicInstancePropertyValue("HtmlPropertiesData", """<img data-sp-prop-name="imageSource" src="/sites/0758d12c-0ca1-4dc1-92b8-517913d1cf59/SiteAssets/logo.jpeg" data-sp-cust-siteid="9656afb2-687d-46d0-b75e-e57888531639" data-sp-cust-webid="9cbd0ac7-d143-43c8-82d4-47f26e35792b" data-sp-cust-listid="899c24c5-ace5-435c-aef1-2b32e83f3222" data-sp-cust-uniqueid="69fb6ca8-a5ce-47fc-94c1-cae91d74d0f8" data-sp-cust-width="1024" data-sp-cust-height="1024">""");
  bannerWebPart.SetPublicInstancePropertyValue("ServerProcessedContent", JsonDocument.Parse("{\"htmlStrings\":{},\"searchablePlainTexts\":{},\"imageSources\":{\"imageSource\":\"/sites/0758d12c-0ca1-4dc1-92b8-517913d1cf59/SiteAssets/logo.jpeg\"},\"links\":{},\"customMetadata\":{\"imageSource\":{\"siteId\":\"9656afb2-687d-46d0-b75e-e57888531639\",\"webId\":\"9cbd0ac7-d143-43c8-82d4-47f26e35792b\",\"listId\":\"899c24c5-ace5-435c-aef1-2b32e83f3222\",\"uniqueId\":\"69fb6ca8-a5ce-47fc-94c1-cae91d74d0f8\",\"width\":1024,\"height\":1024}}}").RootElement);
  homePage.AddControl(bannerWebPart);
  await homePage.SaveAsync();
}

Data type:

public record BannerWebPart(
    string imageSource,
    int imageSourceType,
    string siteId,
    string webId,
    string uniqueId,
    string listId, 
    string title,
    bool showTopicHeader,
    bool showPublishDate,
    string topicHeader,
    bool enableGradientEffect,
    string layoutType,
    string textAlignment,
    string altText,
    List<Author> authors,
    List<string> authorByline,
    int translateX = 50,
    int translateY = 50,
    bool isLockedTitleRegion);

[jansenbe]

@tonyvperez : best option to understand the needed setup is by "reverse engineering" the canvascontent1 field and LayoutWebpartsContent fields and then verify your implementation is outputting the correct JSON.

The current page API implementation in PnP Core SDK still creates page headers "the old way" as this still works, but I agree we should eventually switch to the banner web part model.

[tonyvperez]

@jansenbe It appears that there was only one difference between the SharePoint-made banner from the PageTitle I was using: The DataVersion property value. When using the following code:

var availableComponents = await homePage.AvailablePageComponentsAsync();
var bannerWebPartComponent = availableComponents.FirstOrDefault(p => p.Id == homePage.DefaultWebPartToWebPartId(DefaultWebPart.PageTitle));
var bannerWebPart = homePage.NewWebPart(bannerWebPartComponent);
bannerWebPart.DataVersion = "1.5"; // Must override, as the default 1.0 does not include the image or the `topicHeader`.

The DataVersion is set to 1.0. This doesn't work well with SharePoint. When I set the property value to 1.5, which is what SharePoint does when you use their only Page editor, it works as expected. Thank you very much for suggesting that I pay closer attention to properties when "reverse engineering".

[jansenbe]

@tonyvperez : are you willing to share your implementation with the community? It could help others and can be a good starting basis for integrating this directly in PnP Core SDK.

[tonyvperez]

Absolutely. Here is simplistic version of the solution:

public void CreateBanner(string fullname,
        string caseNumber,
        IPage homePage,
        ICanvasSection bannerSection,
        IFile logo,
        IEnumerable<IPageComponent> availableComponents)
    {
        var bannerPart = new BannerWebPart(
                    logo.ServerRelativeUrl,
                    2,
                    logo.UniqueId,
                   $"{fullname}: Case {caseNumber}",
                    true,
                    false,
                    "Daat Law",
                    true,
                    "FullWidthImage",
                    "Left",
                    string.Empty,
                    new(),
                    new(),
                    true);
        var bannerWebPartComponent = availableComponents.FirstOrDefault(p => p.Id == homePage.DefaultWebPartToWebPartId(DefaultWebPart.PageTitle));
        var bannerWebPart = homePage.NewWebPart(bannerWebPartComponent);
        bannerWebPart.PropertiesJson = JsonSerializer.Serialize(bannerPart);
        bannerWebPart.DataVersion = "1.5"; // Must override, as the default 1.0 does not include the image or the `topicHeader`.
        homePage.AddControl(bannerWebPart, bannerSection);
    }

The BannerWebPart record is defined as:

public record BannerWebPart(
    string imageSource,
    int imageSourceType,
    Guid uniqueId,
    string title,
    bool showTopicHeader,
    bool showPublishDate,
    string topicHeader,
    bool enableGradientEffect,
    string layoutType,
    string textAlignment,
    string altText,
    List<Author> authors,
    List<string> authorByline,
    bool isLockedTitleRegion);