Modal form + grid f...
 
Notifications
Clear all

Modal form + grid for listing porpouses


David Alonso
(@david-alonso)
New Member
Joined: 3 years ago
Posts: 3
Topic starter  

I’m trying to create a list with a previous selection form.

The idea is to create a modalform to give the user the chance of selecting some options and, after the user submit, show a grid with the list information requested.

I was reading the documentation and I supose that the best way to do it is to create a button element inside the modalform and call the grid when the user clicks on it. Is it the right way? If it is correct, could you give me a json definition example for this kind of buttons?

Thanks


Quote
admin
(@admin)
Member Admin
Joined: 6 years ago
Posts: 34
 

Hi David,

If I understand it correctly, you want a form where a user can enter some fields, and send this to an endpoint, so you can process the info, and sends the result as a grid?

I will setup a sample for you in the demo application. 

Best regards,

Chris.


ReplyQuote
David Alonso
(@david-alonso)
New Member
Joined: 3 years ago
Posts: 3
Topic starter  

@admin

That's correct Chris.

Thanks!


ReplyQuote
admin
(@admin)
Member Admin
Joined: 6 years ago
Posts: 34
 

Hi David,

Due to problems with the documentation system I use on the site, I will post the info here.

You can add a button on a form with the following json. This is the code for the button In the Customers section of the demo version, on tab page 2. Administration. At the bottom there is a button 'Modal popup'. This will send a request to an endpoint, and shows a form where selections can be entered.

If the form that is opened and it contains only the ok and cancel button, it will send the content of the filled form with the PUT method to another endpoint. There you can process the data, and return the result in a grid, form, pdf or wathever you want. 

Hope this helps.

Chris

{

            "display""Modal popup", : label of the button to display

            "tooltip""Click to test graphs", : tooltip when you hover over the button

            "fieldname""", : is always empty

            "length"0, : is always 0

            "inputtype""button", : name of element is button

            "block"1, : must be shown in block 1

            "newline"true, : start on a new line

            "labelwidth"2, : for the positioning, 2 blanc columns are added before the button

            "fieldwidth"4, : width of button is 4 columns

            "outline"false, : button is colored, when true button is outlined

            "color""primary", : colors of bootstrap. (see https://getbootstrap.com/docs/4.4/utilities/colors/#color)

            "onclick": { : action to start when button is clicked

                "endpoint""/selectform/books?key=${id}&type=list", : ${id} will send the actual ID if the current customer as parameter to the endpoint..

                "pagetype""modalform", : opens a modalform in a popup

                "pagesize""lg", : size of the form

                "buttons": [ : for a popup button only use the ok and cancel button. This triggers a specific behaviour.

                    "cancel", : close the form

                    "ok" : send all the data of the form with a PUT method to the onclick parameter.

                ],

                "onclick": { : if the ok button in the above onclick is used, a new endpoint is called.

                    "endpoint""/chart/showgrafiek/${id}", : all the data of the form is send to this endpoint, it can process the data and returns what you want

                    "pagetype""modalgraph", : it can return a modalgrid, modalgraph, modalform, ...

                    "pagesize""xl",

                    "buttons": [

                        "cancel",

                        "ok"

                    ]

                }

            }

        }

ReplyQuote
Share: