This is what I'm trying to accomplish:
The end user should click either in an input field or a button and a modal should toggle. This modal would have dynamic data for the user to select, query or search through. After the user selects the dynamic data, the input field value would change to the dynamic data selected.
I also want this modal to be resued throughout the project in different screens.
For Example
A modal table with Suppliers that the user can then pick from, this modal can be used for Items, Orders, Shipments, etc.
I've attached an example from Acumatica ERP:
Right now I'm only thinking about doing this through a Partial however I don't think a partial would allow dynamic server connect data.
A partial is to improve reusability, but I haven't personally tried creating a modal as a partial. Have you done any testing yet? What are the obstacles you come across using a modal inside a partial?
If you’re looking to reuse modal throughout the project, why not place it within your layout page? This will allow to open modal from any nested content page, also, since you’re looking to query different data, you could use server connect and display whichever data you need by loading it form your selected buttons. If you need for data to be displayed is tables, you could also trigger show table on certain condition, e.g. you trigger server connect to display the suppliers data, cry variable value to suppliers to will force suppliers table to shown up and then display modal. In this case, modal should launch already populated with data. And then you could use either session storage or other means of data manipulation
This is a solution, however what happens when there are 700+ pages and more than 2,000+ modal's. Every single page would render the master layout. This would cause too much lag as every use is accessing the system.
What if, instead of putting a modal as a partial. We can put the tables in a partial and then call a modal with the partial in the body.
I'm still trying to figure out a way to do this. Does anyone know how to pass data between a page and a partial?
Sorry, what do you mean by saying 2000+ modals? One modal could serve most of your needs if done correctly also hence why placing modal in the main layout would benefit, by not having to repeat the same modal structure over and over, single modal would be used within all the pages. Using a condition region, elements would not even be loaded in dom, meaning that only single table of data would be loaded. Meaning you could load server connect data in that modal based on your needs, e.g variable modal_data = suppliers, load suppliers table with bindable data for filtering
Also I believe partials are preloaded, so if you were to place them all within a content page or layout, they’d be rendered, and since partials only take params and data is rendered on load, I don’t think they can’t be as dynamic
The purpose of Partials is to allow developers to break down and reuse pieces of HTML code across different templates, which helps in keeping the code DRY (Don't Repeat Yourself).
A Web Component is a suite of standardized APIs that allows developers to create custom, reusable HTML elements with encapsulated functionality and styling. The primary purpose of Web Components is to enhance web development by providing a more modular, reusable, and maintainable approach to building user interfaces.
To summarize, for your application you will need a Web Component.
Hey @astroGlide you can absolutely do what you asked with modals. We do a similar thing and use a lot of partials including modals inside partials.
It will just be a little bit of pain to setup as Wappler doesn't support working with partials very well, so it will require a little bit of manual code adjustments.
Partials are great if you want to reused certain pieces of code or elements on a page. To clarify some of the points, there is no need to create wappler extensions or web extensions - partials are just another way to include snippets of code onto a page.
Partials, content pages and layouts are complied on your server like this: partials > content page > layout = full page. This full page of code is what is sent to the browser when you make a request for a page - meaning that whatever is in the code that the browser receives (including your partials modal) is rendered in the browser.
Because of this it is not a good idea to place your modal partial file in a layout, as evaldas mentioned, if you have 700 pages, and lets say only 10 actually use the partial's modal, then the remaining 740 pages will also have to modal rendered in the browser and slow down your application.
Sorry, now onto how to do it:
On all of content pages where you'll be using the partial and modal, you need to make sure that the button and input all have the same ID. This is important as the modal will need to reference the ID of those elements to populate them.
On one of the content pages, create your modal with the suppliers, and all the functionality to populate your input field.
Go into the code view, select and copy the modal code and paste it into the partials file. If you modal requires serverconnect API calls, you can also copy these into the partials file too.
Remove the modal code from the content page, and replace with the partials include.
To get it working on other content pages: include the same partials file, make sure your elements have the same IDs, and copy and paste any on-click/on-change events on the button and input elements into the other pages.
