NEW!Incredible offer for our exclusive subscribers! Read More

Markets

Use of UiComponent InsertListing – How to insert a listing inside a Form Element

1 Mins read

Many times we face the issue of having a listing of customers or products inside a form for mass selection. Magento UIComponent has provided a very useful feature which we can use to solve such issues. InsertListing UI Component is basically a component which allows us to insert the listing with all its features such as pagination, mass-actions, sorting, inside other UI Components.

Today, we are going to insert a product listing inside our form. Our purpose is to mass select the product and save it in the database. I will show you two different ways you can add the listing :-

1-Directly in the form

    …

   

       
           
                General
                10
           

       

       
           …
       

       
           …
       

       
           
               
                    false
                    true
               

                true
               
                    product_listing.product_listing.columns.ids
               

                product_listing
                product_listing
           

       

   

This will insert the product listing in your form.

Use of UiComponent InsertListing, Insert a listing inside a Form Element

2-Using a modal

           …
       
           
       

   

This will display a link for product selection

Use of UiComponent InsertListing, Insert a listing inside a Form Element

Now add the code for modal which will have our insertListing component

   …
   
       …
   

   
       
           
               
                    my_form.my_form_data_source
               

               
                    actionDone
               

               
                   
                        All Products
                   

                   
                       
                           
                                Selected
                           

                           
                                action-primary
                           

                           
                               
                                   
                                        index = product_listing
                                   

                                    save
                               

                               
                                    closeModal
                               

                           

                       

                   

               

           

       

       
           
               
                    false
                    true
               

                true
               
                    product_listing.product_listing.columns.ids
               

                product_listing
                product_listing
           

       

   

Now our modal with listing is ready.

Use of UiComponent InsertListing, Insert a listing inside a Form Element

Saving

On our save controller, we can get our selected rows of listing by using below code.

$this->getRequest()->getParam(‘namespace-of-your-listing’);

In our case the namespace was ‘product_listing’, so the code will be :-

$this->getRequest()->getParam(‘product_listing’);

The post Use of UiComponent InsertListing – How to insert a listing inside a Form Element appeared first on CedCommerce Blog.

Related posts
Markets

Top Southeast Asia eCommerce Platform | A Complete Magento Multichannel Selling Guide

10 Mins read
Southeast Asia has the fastest growing eCommerce market with a 90 percent population connected through their mobile phones. Many similar data suggest…
Markets

The Untold Secret To Museum of Jewelry Success on eBay

3 Mins read
Museum Of Jewelry has been selling online since 1999 and opened its door to online marketplaces in 2019. They have been on…
Markets

Progressive Web Apps and KPIs: One solution to enhance business profits

6 Mins read
Why do Progressive Web Apps always hit the mark? It is because they happen to check all the right boxes. From being…
Power your team with Getecomstore

Add some text to explain benefits of
subscripton on your services.

Leave a Reply

Your email address will not be published. Required fields are marked *