Skip to main content

Notifications

Power Pages - Customize & Extend
Answered

Button in power pages dataverse list

(0) ShareShare
ReportReport
Posted on by 74
I am in the process of moving our internal ticket system to power pages and I want to add a button in each row that's essentially "open ticket". I just need help figuring out how to get a button added to the list then I can run with this.
Categories:
  • Verified answer
    ZackS Profile Picture
    ZackS 74 on at
    Button in power pages dataverse list
    I figured out how to do it in JavaScript, I adjusted it to work for everyone here
     
    document.addEventListener("DOMContentLoaded", function () {
        const listInterval = setInterval(() => {
            const tableBody = document.querySelector(".view-grid table tbody");
     
            if (tableBody) {
                clearInterval(listInterval);
     
                //find all the rows
                const rows = tableBody.querySelectorAll("tr");
     
                rows.forEach(row => {
                    //find the column to put the button
                    const pickUpTicketCell = row.querySelector('td[data-th="Pick up ticket"]');
     
                    if (pickUpTicketCell) {
                        //to prevent dupped buttons
                        if (!pickUpTicketCell.querySelector("button")) {
                            //create the button
                            const button = document.createElement("button");
                            button.innerText = "Pick Up Ticket";
                            button.style.margin = "5px"; //style
                           
                            //click event
                            button.addEventListener("click", function () {
                                const ticketId = row.dataset.id;
                                alert(`Pop up message, row ID: ${ticketId}`);
                           
                            });
     
                   
                            pickUpTicketCell.appendChild(button);
                        }
                    }
                });
     
                console.log("Buttons added successfully.");
            }
        }, 500);
    });
  • Suggested answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 8,955 on at
    Button in power pages dataverse list
    Hi, you can achieve this by using the OOB List + Basic Forms from Power Pages.
     
    How far did you get with your list configuration? 
     
  • ZackS Profile Picture
    ZackS 74 on at
    Button in power pages dataverse list
    More context:
     
    I've tried to use javascript, css, and html but I can't seem to figure it out.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #9 Get Recognized…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 144,172

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 64,285

Leaderboard

Featured topics