Example App – VTAP Custom Form with API Integration

This example demonstrates how to build a simple form using BootstrapVue and VTAP's component framework, including form submission, API interaction, and handling of success or error messages.

Setup Steps

  • Create a script using the Module Designer.
  • Register the script using the DETAIL_BASIC_BUTTON hook.
  • When the button is clicked, a modal is displayed using VTAP.Utility.ShowModal.
  • The modal contains a basic form to collect user inputs.
  • On form submission, the data is saved using VTAP.AppData.Save.

Technologies and Concepts Used

  • BootstrapVue is used to build responsive and styled form elements inside the modal.

  • VTAP.Component.Register is used to place the button on the module's detail view.

  • VTAP.Utility.ShowModal is used to display the modal containing the form.

  • VTAP.AppData.Save handles the data submission. This is suitable for saving data in a VTAP custom app.

    • If you want to update or create records in standard modules (such as Deals or Contacts), you can use VTAP.API.POST instead.

  • Notification Handling:

    • VTAP.Utility.ShowSuccessNotification("success") to display a success message.
    • VTAP.Utility.ShowErrorNotification("error") to display an error message.
var Potentials_Component_CustomDetailButton = VTAP.Component.Core.extend({ 
 created() {
        VTAP.Component.Register('DETAIL_BASIC_BUTTON', 
                                {},
                                VTAP.Component.Load('CustomButton','Potentials'));
    }

});

var Potentials_Component_CustomButton = VTAP.Component.Core.extend({
    methods : {
            click(){
                VTAP.Utility.ShowModal({
                    component: VTAP.Component.Load('ShowModal', 'Potentials'),
                    componentData: {},
                    modalOnModalMode: true

            });

            }
    },
    template:`<button class='btn btn-primary' @click=click()>Custom Button</button>`
});

var Potentials_Component_ShowModal = VTAP.Component.Core.extend({
      data() {
    return {
      form: {
        name: '',
        email: '',
        message: ''
      }
    };
  },
  methods: {
    onSubmit() {
      // handle form submission
      VTAP.AppData.Save('Potentials', { data_key: 'formSubmit',data_value:this.form}, (err, response) => {
            VTAP.Utility.ShowSuccessNotification("success")

      });
    }
  },
    template:`    <b-modal id="myModal" title="Contact Form" hide-footer>
    <b-container class="mt-3">
    <b-form @submit.prevent="onSubmit">
      <b-form-group label="Name" label-for="name">
        <b-form-input id="name" v-model="form.name" required></b-form-input>
      </b-form-group>

      <b-form-group label="Email" label-for="email">
        <b-form-input
          id="email"
          type="email"
          v-model="form.email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group label="Message" label-for="message">
        <b-form-textarea
          id="message"
          v-model="form.message"
          rows="3"
        ></b-form-textarea>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </b-container>
  </b-modal>`
});

Key Highlights of the Example

  • Shows how to launch a modal on button click.
  • Demonstrates form field binding using v-model.
  • Handles form submission using @submit.prevent.
  • Includes feedback messages for both success and failure scenarios using VTAP utilities.

This example is intended as a minimal, working reference to help with building and submitting custom forms using VTAP.