UI Actions

How to build UI Actions ?

The ui components feature enables us to modify or add custom buttons or icons. Which on click will perform actions.

• Adding a component
  • VTAP has enabled new low code platform where you can just perform actions by writing onclick functions.
  • Click on the green box on top of the page. ref
  • Now you can see a popup. By adding the following details we can get started on ui components.
  • component name -> the name of the component which you want to use for this custom action.
  • component type ->What type if component it is. (Where this icon will sart showing in the UI).
  • module -> to whcih module it should show and work.
  • on clcik -> what is the action to be performed when this button is clicked.
  • button label -> name of the button to show
  • component icon -> the icon can be selected from the pre defined drop down.
  • color -> color of the button or the icon.

What are the types of components ?

• Detail View More Action Item
• Detail View Basic Button
• Detail View Action Icon
• List View Add Record Type
• List View Settings Action
• List View Row Basic Action Icon
• List View Row Secondary Action Icon
• List View Mass Action Icon
• Global Action Icon
• List View Button

Examples

Detail View Basic Button - Add a button to delete the current record from header view.

    VTAP.Api.Delete('records', {id:VTAP.Detail.Id(), module:VTAP.Detail.Module()}, (err, res) => {
}); 

• First go to ui actions and create a new record.
• Add module as contacts.
• choose the name of the button and icon.
• now go to on click block.
• Add the above code. Here we will take the record id by using VTAP.Detail.Id() and similarliy for module.
• You can add a notification on sucess to show the record is deleted.

List View Basic Button - Add a button to redirect to custom page.

    window.location.href = "http://localhost/v9/view/Page1?module=Potentials";

• Go to Ui actions create a new actions.
• Add any component name which suits your action.
• Select the modules.
• Select the button label and the icon.
• Select color.
• Now add the above code in onclick block.
• On clciking that button from list view you will be redirected to the custom page or any website which is added.