Question T20632
Visible to All Users

Customize dynamic panel footer buttons

created a year ago

Hi, i am using dynamic panel element with tabs option to display the elements. I would like to customize the behavior of this component to make it closer to my ui/ux.

The main objective is to list all panels in tabs as it currently does, hide the information from the different generated panels (done with css), and add 2 buttons to the footer of dynamic panel called 'edit' and 'remove'. The 'remove' one should remove the current panel which is being selected, and the edit one to open a popup survey with a form which i am generating from the template elements of the dynamic panel.

Furthermore, as i dont need the next/prev buttons from the dynamic panel footer, i would like to remove them, or overwrite them with the custom functionality explained above if it makes it easier.

Maybe there is a different way to achieve this but i am not sure.

Sign in to comment on this post

Answers approved by surveyjs Support

created a year ago

Hello Jose,
You can use the survey.onGetPanelFooterActions function to register custom actions within a dynamic panel's footer action container. For instance, the following code adds a new Edit Action.

JavaScript
survey.onGetPanelFooterActions.add((sender, options) => {
   const panel = options.panel;
   const dynamicPanel = options.question;
   options.actions.push(
     new Action({
       id: "edit-panel",
       title: "Edit",
       action: () => {
         alert("Edit Panel: " + dynamicPanel.currentIndex);
       },
     })
   );
});

View Demo

Let me know if you have additional questions.

Furthermore, as i dont need the next/prev buttons from the dynamic panel footer, i would like to remove them, or overwrite them with the custom functionality explained above if it makes it easier.

To process this inquiry in the most efficient manner, I created the following ticket on your behalf:
Dynamic Panel in Tab mode - Customize the footer actions and hide the Next/Prev actions.

Please refer to it for further correspondence.

    Comments (2)
    JT JT
    Jose Tomas a year ago

      But the code you provided adds the Edit button to each iteration of the dynamic panel, what i mean is to add to the general dynamic panel container. And as i will use tabs display only, my desire is to trigger those actions related to the current tab.

      Clipboard-File-1.png

      Jane a year ago

        Hello,
        You can add custom buttons to the Dynamic Panel's footer toolbar. To remove a panel, use the removePanelUI function. To obtain the current panel, use the currentPanel property.

        JavaScript
        const dynamicPanel = survey.getQuestionByName("vacation-info");
const footerToolbar = dynamicPanel.footerToolbar;
const prevAction = footerToolbar.getActionById("sv-pd-prev-btn");
const prevActionIndex = footerToolbar.actions.indexOf(prevAction);
footerToolbar.actions.splice(prevActionIndex, 1);

const nextAction = footerToolbar.getActionById("sv-pd-next-btn");
const nextActionIndex = footerToolbar.actions.indexOf(nextAction);
footerToolbar.actions.splice(nextActionIndex, 1);

footerToolbar.actions.push(
    new Action({
      id: "edit-panel",
      title: "Edit",
      action: () => {
        alert("Edit Panel: " + dynamicPanel.currentIndex);
      },
    })
);
footerToolbar.actions.push(
    new Action({
      id: "remove-panel",
      title: "Remove",
      action: () => {
        dynamicPanel.removePanelUI(dynamicPanel.currentPanel);
      },
    })
);

        To hide the Remove button within a panel, use the survey.onGetPanelFooterActions function.

        JavaScript
        survey.onGetPanelFooterActions.add((sender, options) => {
   options.actions.length = 0;
});

        Consider the updated code: View Demo.

        Sign in to comment on this post