Forum Discussion

Pavel2235's avatar
Pavel2235
Brass Contributor
Oct 11, 2023

Add ClientsideWebpart quick links

Hi!
I tried to create a modern page with ClientsideWebparts.

 

const testPage: IClientsidePage = await sp.web.loadClientsidePage('/SitePages/mypage1.aspx');

const quickLinks = ClientsideWebpart.fromComponentDef((partDefs.filter(c => c.Id === "c70391ea-0b10-4ee9-b2b4-006d3fcad0cd")[0]));
    quickLinks.setProperties({
        Title: "Google",
        iconPicker: "search",
        buttonLayoutOptions: {
            buttonTreatment: 2,
            iconPositionType: 2,
            linesOfText: 2,
            showDescription: false,
            textAlignmentHorizontal: 2,
            textAlignmentVertical: 2
        },
        dataProviderId: "QuickLinks",
        serverProcessedContent: {
            links: {
                baseUrl: "/sites/TestSite",
                "items[0].sourceItem.url": "https://xvzms.sharepoint.com/"
            }
        },
        items: [
            {
                altText: "",
                description: "",
                id: 1,
                sourceItem: {
                    fileExtension: "",
                    itemType: 2,
                    progId: ""
                },
                thumbnailType: 3
            }
        ]
    })

    testPage.addSection().addControl(quickLinks);

    await testPage.save();

 

But unfortunately, I don't see any links on the page.

Please tell me what could be the error?

spfx: 1.17.4
pnp sp: 3.18.0

 

 
 

 

 

developer
PnP
  • LeonPavesic's avatar
    LeonPavesic
    Silver Contributor
    Oct 11, 2023

    Hi Pavel2235,

    I have reviewed your question carefully and I believe that the problem is that you are not setting the items property correctly. The items property should be an array of objects, where each object represents a link. Each link object should have the following properties:

    • altText: The alt text for the link.
    • description: The description for the link.
    • id: A unique identifier for the link.
    • sourceItem: An object that represents the source item for the link. The sourceItem object should have the following properties:
      • fileExtension: The file extension for the source item.
      • itemType: The type of the source item.
      • progId: The prog ID for the source item.
      • url: The URL of the source item.
    • thumbnailType: The type of thumbnail to display for the link.

    Here is an example of how to set the items property correctly:

     

    items: [
    {
        altText: "",
        description: "",
        id: 1,
        sourceItem: {
            fileExtension: "",
            itemType: 2,
            progId: "",
            url: "https://xvzms.sharepoint.com/"
        },
        thumbnailType: 3
    }
]

     

     

    Once you have set the items property correctly, you should see the links displayed on your page.

    Please click Mark as Best Response & Like if my post helped you to solve your issue.
    This will help others to find the correct solution easily. It also closes the item.


    If the post was useful in other ways, please consider giving it Like.


    Kindest regards,


    Leon Pavesic
    (LinkedIn)

Resources