Magento2:How to add a custom button that sends few edit form fields via ajax to call to an API to populate its response in another field?

Question

How to implement a custom button in edit form page that takes few edit form values,sends to ajaxURL and populates some API response in another field on same page in magento2?

Answer 1

I sorted out a lot earlier but thought someone might get help from this. Well, I wanted to add a TestAPI button in the line of Save and Back Buttons. Then I wanted to an ajax call for that TestAPI button that would take the required fields and send it to an admin controller that would call the API and get response and display it in the response field.

So, firstly I added a button in file like:

app\code\Company\Module\Block\Adminhtml\Post\Edit.php

Code:

 $this->addButton(
            'testapi',
            [
                'label' => __('Test API'),
                'onclick' => 'javascript:testApi(); return false;',
                'class' => 'customTestrun'

            ]
        );

Now in file:

\app\code\Company\Module\Block\Adminhtml\Post\Edit\Form.php

with other fields, I added some code with a last field with after_element_htmlattribute with complete JS part in it as follows:

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$FormKey = $objectManager->get('Magento\Framework\Data\Form\FormKey');
$myKey = $FormKey->getFormKey();
$url = $this->getUrl('module/api/testapi');

$fieldset->addField(
            'request_packet', 'editor', ['name' => 'request_packet',
        'label' => __('Request Packet'),
        'title' => __('Request Packet'),
        'required' => true,
        'after_element_html' => '<script type="text/javascript">

                                    function testApi() {
                                        var requestPacket = jQuery("#post_request_packet").val();
                                        var u_identifier = jQuery("#post_unique_identifier").val();
                                        var url_key = jQuery("#post_url_key").val();
                                        jQuery("#post_response_packet").val("Loading...");
                                        jQuery.ajax({
                                            url: "' . $url . '",
                                            type: "POST",
                                            data: {u_identifier: u_identifier,url_key:url_key, requestpacket:requestPacket, formkey: "' . $myKey . '"},
                                            //dataType: "json",
                                            success: function (response) {
                                                //console.log(response);
                                                jQuery("#post_response_packet").val(response);

                                            }
                                        });
                                    }

                                </script>'
            ]
    );

Then I made a file here:

app\code\Company\Module\Controller\Adminhtml\Api\Testapi.php

and put code below:

<?php

/*
 * Author: Shoaib
 * Method: API Testing Controller
 */

namespace Company\Module\Controller\Adminhtml\Api;

use \Magento\Backend\App\Action\Context;
use \Company\Module\Helper\Data;

class Testapi extends \Magento\Backend\App\Action {

    protected $helper;

    public function __construct(Context $context, Data $helper) {
        $this->helper = $helper;
        parent::__construct($context);
    }

    public function execute() {
        $identifier = $this->getRequest()->getPost('u_identifier');
        $request_parameters = $this->getRequest()->getPost('requestpacket');
        $url_key = $this->getRequest()->getPost('url_key');
        //Called a helper method which has CURL functionality and returns response.
        $api_response = $this->helper->callApi($identifier, $request_parameters, $url_key); 
        //print_r($api_response);
        //exit;
        die(json_encode($api_response));
    }

}

This returned the response to Ajax Method and in turn displays response in one of the assigned Field.

This solution worked great! I hope this helps others as well.