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 = "https://xxxxx.od2.vtiger.com/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.

Example 2 - Create a POPUP Modal using module designer and UI actions.

1. First lets add the trigger which will open the popup, for example add a button in List page. You need to go to UI Actions inside Platforms > Module Designer.
2. Add UI Component and select Component Type as "List View Button".
3. Give a Label, icon, color if needed and then in On click you need to add below code.

        
                //Popup is the name of the popup component defined in Contacts module
                VTAP.Utility.ShowPopup({component:VTAP.Component.Load('Popup','Contacts')});
        

4. Go to module designer select Contacts module to create a popup component.
5. Click on components and create a component by selecting custom in the options with name. ex- Popup.
6. Add the below code in the module designer.
7. Here MYMODULE should be replaced by the current module name(eg:Contacts) where the tap script is created.
8. Save and publish the script to see the popup in action.

    
    var MYMODULE_Component_Popup = VTAP.Component.Core.extend({
        data() {
        //store popup data to make use of them to display and to send it to server
        return {
            name:"",
            email:""
        }
    },
    methods: {
        onok(event) {
            //prevent popup to close
            event.preventDefault();

             //add post action on click on ok button
            VTAP.Api.Post("records", {module:'Contacts',"lastname":this.name,"email":this.email}, (error,response) => {
                    if(response) {
                        VTAP.Utility.ShowSuccessNotification("Saved successfully");
                        this.hidePopup();
                    } else {
                        VTAP.Utility.ShowErrorNotification(error);
                    }
             });
        },
        hidePopup() {
            //bv::hide::modal is the event, modal-1 is the modal popup id which needs to be closed.
            this.$root.$emit('bv::hide::modal', 'modal-1')
        }
    },
    //:no-close-on-backdrop="true" is to ensure the popup is not closed when clicked outside the modal
    template: `<b-modal  id="modal-1" title="Save Contact" @ok=onok  :ok-title="Save" :no-close-on-backdrop="true">
                    <p class="my-4"> 
                        <div class="container" >
                             <input v-model="name" class="form-control w-50 m-2" placeholder="Enter the name">
                             <input v-model="email" class="form-control w-50 m-2" placeholder="Enter the email address">
                        </div>    
                    </p> 
                </b-modal>`
});