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


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.