I am new to Vue and Axios and trying to use it in Salesforce Marketing Cloud - Cloud pages. Basically there are 3 parts,

1. HTML vue page : this is a form page, where the user is asked to input the automation name and click on send button
2. App.js : this is build using axios and Vue.
3. Form-hander.js (backend) : SSJS code that runs the automation.

I referred this document to build this setup -https://ampscript.xyz/how-tos/how-to-start-status-of-automation-from-marketingcloud-form/. I understand the Form-hander.js (ssjs) code and this can be skipped.

What I am not able to understand is the flow of App.js, could anyone please explain me what is happening here. I understand that on click of send button, the function in App.js - validateForm is called. Here after I don’t understand the flow of the code. From App.js is the form-handler code called ? OR the post method used in the HTML page is directly called the form-handler page and staring the automation?

Here is the code of app.js. Can some explain to me in simple terms the flow of this code, would be really helpful.

   new Vue({
    el: '#app',
    data: {
        status: 100,
        form: {
            name: 'My Test Automation',
            context: 'perform'
        },
        endpoint: '',
        message: ''
    },
    watch: {
        status: function () {
            if(this.status == 201 || this.status == 102) {
                this.form.context = 'check';
            } else {
                this.form.context = 'perform';
            }
        }
    },
    mounted: function() {
        this.endpoint = this.$refs.form.getAttribute('action');
    },
    methods: {
        sendFormData: function() {
            this.status = 101;
            var $this = this;
            axios({
                method: 'POST',
                url: $this.endpoint,
                data: $this.form,
                validateStatus: function() { return true }
            }).then(function(result) {
                $this.status = result.data.Status;
                $this.message = result.data.Message;
                $this.checkStatus();
            }).catch(function(error) {
                console.error(error);
            });
        },
        checkStatus: function() {

            var $this = this;
            var intervalID = setInterval(function() {
                axios({
                    method: 'POST',
                    url: $this.endpoint,
                    data: $this.form,
                    validateStatus: function() { return true }
                }).then(function(result) {
                    $this.status = result.data.Status;
                    $this.message = result.data.Message;
                    if($this.status == 200 || $this.status == 500) {
                        clearInterval(intervalID);
                    }
                }).catch(function(error) {
                    console.error(error);
                });
            }, 10000); 

        },
        validateForm: function() {
            if (this.$refs.form.checkValidity() !== false) {
                this.sendFormData();
            }
            this.$refs.form.classList.add('was-validated');
        }

    }
})

CodePudding user response：

1. When the components is mounted, you run the form binded action on (submit?)

2. The action is probably binded to the sendFormData function(in methods)

3. Inside sendFormData, there is the setup of the axios request, followed be a then callback which handles the response from the request

4. The checkStatus function is called inside the "then" block

5. Sends the same data back to the server every 10 seconds if the previous response doesn't have status code other than 200 or 500.

6. ValidateForm is may binded to some onInput or onChange event on the template
   ** The watcher is always looking for the status code and updates a form context

CodePudding user response：

Let me explain you the flow of the code you posted :

• Once component mounted, The first method which is getting called is mounted(). In this method you are fetching the endopint binded to the action attribute in your form html element and binding that in a data variable via this.endpoint.
• Now, you are calling validateForm() method on click of submit button to validate the input fields. If validation pass, you are calling sendFormData() method to make an POST API call.
• After getting the response, you added a watcher on status to update the form.context value based on the status code you received from an API response.
• At the end, you are calling a checkStatus() method on success of axios call and in this checkStatus() method you are again making an POST API call after every 10 seconds and following step 3.