Skip to content

How to get selected values from insertListing inside a modal component to display on parent

I have a form, xml below, which has a modal component with an insertListing component to display a customer selection. This works perfectly fine, and submits the selected items with the underlying form.

The problem is when the modal is closed after items are selected there is no indication to the user that anything was in fact selected, so i wanted to display the selected customer name and id on the form somewhere.

So my question is: is there a way for me to be able to grab the data that was selected in the modal once it’s closed to display on the form itself before it’s submitted? Just for usability really.

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">
                pillbox_textmessaging_campaigns_add_form.campaigns_add_form_data_source
            </item>
            <item name="deps" xsi:type="string">
                pillbox_textmessaging_campaigns_add_form.campaigns_add_form_data_source
            </item>
        </item>
        <item name="label" xsi:type="string" translate="true">Add New Campaign</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">pillbox_textmessaging_campaigns_add_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            <item name="save" xsi:type="string">PillboxTextMessagingBlockAdminhtmlCampaignsButtonsSave</item>

        </item>
    </argument>
    <dataSource name="campaigns_add_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">PillboxTextMessagingModelCampaignsFormDataProvider</argument>
            <argument name="name" xsi:type="string">campaigns_add_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="*/*/save"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>

    <fieldset name="campaign_information">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Campaign Information</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>

        <modal name="customers_modal">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">

                    <item name="onCancel" xsi:type="string">
                        actionDone
                    </item>
                    <item name="options" xsi:type="array">
               
                        <item name="title" xsi:type="string">
                            All Customers
                        </item>
                        <item name="buttons" xsi:type="array">
                            <item name="0" xsi:type="array">
                                <item name="text" xsi:type="string">
                                    Selected
                                </item>
                                <item name="class" xsi:type="string">
                                    action-primary
                                </item>
                                <item name="actions" xsi:type="array">
                                    <item name="0" xsi:type="array">
                                        <item name="targetName" xsi:type="string">
                                            index = product_listing
                                        </item>
                                        <item name="actionName" xsi:type="string">save</item>
                                    </item>
                                    <item name="1" xsi:type="string">
                                        closeModal
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
            <insertListing name="customer_listing">
                <settings>
                    <dataLinks>
                        <exports>false</exports>
                        <imports>true</imports>
                    </dataLinks>
                    <autoRender>true</autoRender>
                    <selectionsProvider>
                        customer_listing.customer_listing.customer_columns.ids
                    </selectionsProvider>
                    <dataScope>customer_listing</dataScope>
                    <ns>customer_listing</ns>
                </settings>
            </insertListing>
        </modal>
        <button name="customers_button"
                component="Magento_Ui/js/form/components/button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">
                        Select Customers
                    </item>
                    <item name="title" xsi:type="string" translate="true">
                        Customers
                    </item>
                    <item name="displayAsLink" xsi:type="boolean">true</item>
                    <item name="labelVisible" xsi:type="boolean">true</item>
                    <item name="template" xsi:type="string">
                        ui/form/components/button/container
                    </item>
                    <item name="actions" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="targetName" xsi:type="string">
                                pillbox_textmessaging_campaigns_add_form.pillbox_textmessaging_campaigns_add_form.campaign_information.customers_modal
                            </item>
                            <item name="actionName" xsi:type="string">
                                toggleModal
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </button>
        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Campaign Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>

        </field>
        <field name="message">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Message Content</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <htmlContent name="sms_count_html_content">
            <argument name="block" xsi:type="object">
                PillboxTextMessagingBlockAdminhtmlSharedHtmlContentTextFormCountHtml
            </argument>
        </htmlContent>
        <field name="ready_to_send" formElement="checkbox">
            <settings>
                <label translate="true">Ready To Send?</label>
                <tooltip>
                    <description translate="true">Check the box if you would like to send the campaign immediately.
                    </description>
                </tooltip>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <prefer>toggle</prefer>
                        <valueMap>
                            <map name="false" xsi:type="boolean">false</map>
                            <map name="true" xsi:type="boolean">true</map>
                        </valueMap>
                    </settings>
                </checkbox>
            </formElements>
        </field>
    </fieldset>
</form>