Hello everyone,

In this article, I will explain how to implement a PopupActionButton in WebAtoms with examples.

What you will learn?

• You will learn how to implement the PopupActionButton on any of the pages.
• How to display the menu item.
• What action can be done using this component?

Why use it?

• Generally, PopupActionButton is used in actionRenderer (a bindable property of the base page) to display some quick menu options.
• On the basis of user selection, you can perform some actions or navigate to other pages.

How to write code?

<PopupActionButton
     icon="fa-solid fa-ellipsis-vertical">
      <div 
            style-width="80px" 
            data-click-event="none" 
            data-click-animate="no">
                <MenuItem
                    label="Add"
                    icon="fa-solid fa-add"
                    eventClick={() => 
                      this.viewModel.openNewPage(AddNewTraining, 
                     "Add New Training")} />
                <MenuItem
                    label="Modify"
                    icon="fa-solid fa-edit"
                    eventClick={() =>
                      this.modifyTraining(this.selectedTrainings)} />
                <MenuItem
                    label="Delete"
                    icon="fa-solid fa-trash-can"
                    eventClick={() => this.deleteTraining()} />
     </div>
</PopupActionButton>;

MenuItem is a function that takes some parameters like label, icon, event-click, href, target, etc.

Code explanations

• We can set the label property to display the name of that menu.
• We can set the icon to the menu. In the above example, we have added the icon using the font awesome.
• We can set the event click also to perform some action. In the above example, we have called one function on click to the menu item to delete the training object.
• We can redirect to other pages using the href property to the menuItem.