I want to display events and it's details in a tile layout using PnP Search result web parts how to achieve this

[Jchaudhari31]

I am working on displaying events from a SharePoint list using PnP Search Result Web Parts. The goal is to present these events in a tile layout on a SharePoint page. I have used the Cards layout, but it restricts me from displaying the required fields due to its default field mappings.

To overcome this, I tried using a Custom Layout and modified the template to include additional fields such as Location, Start Date, and End Date. However, when I add these fields, the cards disappear instead of showing the event details.

The required layout should display event details like the Event Name, Location, Start Date, and End Date on each card. Additionally, each card will also contain a button to register for the event. I also have a snapshot illustrating how the events should appear.

I need help achieving this layout and ensuring the additional fields, along with the register button. Could you guide me on how to resolve this?

[kasperbolarsen]

Perhaps one of the samples in the layout samples repository might save as inspiration, like this one perhaps, https://github.com/microsoft-search/pnp-modern-search-layouts/blob/main/Results%2FHandlebars%2FQuick%20Links%20lookalikes%2FQuickLinks.md

[Jchaudhari31]

Hi Kasper,

Thank you for your response. I was unable to reply to you in the discussion, so I have reached out via email.

I wanted to confirm if, using the custom template, I can add a button to the event card.

Looking forward to your response.

[kasperbolarsen]

Since we actively purge any kind of custom code in the layouts (security reasons) the best you can do is to link to the place where the user can sign up to the event. It cannot be a pop up dialog.

[Jchaudhari31]

Hi Kasper,

I am new to this platform and the IT industry, so I would appreciate your guidance. My client wants buttons to appear within the card itself. Do you mean using link which directs to options like PowerApps, or is there another recommended approach for this?

Looking forward to your advice.

[Jchaudhari31]

Hi Kasper,

I have successfully created an events card layout using the PnP Search Results web part. Your documentation was incredibly helpful—thank you!

I would like to add a registration button on each event card that triggers a Power Automate flow when clicked. Could you please guide me on how to achieve this? Alternatively, if there’s a better approach, I would appreciate your guidance.

[Jchaudhari31]

Like this I was trying to insert

function triggerEventRegistration(button, eventDetails) {

// Disable button immediately to prevent double submissions

button.disabled = true;

button.textContent = 'Registering...';


// Get current user context

const userEmail = _spPageContextInfo.userEmail;

const userName = _spPageContextInfo.userDisplayName;


// Construct the registration payload

const registrationData = {

    Id: eventDetails.ListItemID,

    Title: eventDetails.Title,

    StartDate: eventDetails.StartDate,

    EndDate: eventDetails.EndDate,

    registrantEmail: userEmail,

    registrantName: userName,

    registrationDate: new Date().toISOString()

};

const flowUrl = 'flow url';



fetch(flowUrl, {

    method: 'POST',

    headers: {

        'Content-Type': 'application/json'

    },

    body: JSON.stringify(registrationData)

})

.then(response => {

    if (!response.ok) {

        throw new Error(`HTTP error! status: ${response.status}`);

    }

    return response.json();

})

.then(data => {

    button.textContent = 'Registered ✓';

    button.style.backgroundColor = '#107c10';

  

    const successMessage = document.createElement('div');

    successMessage.textContent = 'Registration successful! Check your email for details.';

    successMessage.style.color = '#107c10';

    successMessage.style.marginTop = '8px';

    successMessage.style.fontSize = '12px';

    button.parentNode.appendChild(successMessage);

})

.catch(error => {

    console.error('Registration error:', error);

    button.disabled = false;

    button.textContent = 'Register';

    alert('Unable to register for the event. Please try again.');

});

}

</script>

[kasperbolarsen]

It sounds like you should consider a custom SPFx web part, as that will give you the freedom to do as you pleases.
As PnP Modern Search is running on several thousand tenants we have to be very careful with the kind of changes we accept

[patrikhellgren]

@Jchaudhari31 Since you want to pass parameters to the flow you will probably need to create a custom web component with for example a button or a link in an extension library that you then add to the search results webpart. That way you can include that button or link in your search results layout.

[Jchaudhari31]

Ok, got it!
thank you so much for your guidance!

[kasperbolarsen]

The best low cost alternative I have is something like this:
https://github.com/user-attachments/assets/bf0b5754-5498-40b2-b734-2bb431410c89

The link starts an Azure function that puts a job on a queue and returns the HTML confirmation.

[socrates51]

now idea if it is possible but i am using json column formatting in order to start the flow from column link added there (in my scenario i have got calculated value with Column Formatting as follows:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{"id": "6fdf7d03-20df-472a-9bf2-57283d0caae6"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Completed"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "STARTTHEFLOWthatIStheLinkVISIBLEinTHEcolumn"
}
]
}

[Jchaudhari31]

Can we get this button directly on the cards?