How to have two views on one page?

I have a component that has a machines table, a locations table and a machine-location xref table. The xref table is just a cross reference so it shows all the locations where a specific machine is located. Or conversely all the machines located at a specific location. On the view of a specific machine, I would like to show the data elements associated with that machine, as well as a listing (with pagination and filtering) on the bottom of this machine page which shows all the locations where this machine exists. Same for the Location listing, I would like to show at the bottom of the screen which shows the location information a listing of all machines located at that location (with pagination and filtering).

I was able to accomplish my goal by modifying the model of the machine get item function to also get the location information and include it with the $item object. And then I moved the template for the machine to the templates/html folder and made the needed changes to list the locations. But I can't figure out how to add the pagination and filtering.

Hopefully this is clear - can anyone give me any advice on how to best approach this?

Thanks in advance.

Hello,

Yes, your goal is clear. To accomplish pagination and filtering for the listing of locations where a specific machine exists and vice versa, you can follow these steps:

API Endpoint Modification: Since you have already modified the model of the machine get item function to include location information, you can now modify the API endpoint that serves the data for a specific machine to also include the list of locations. For example, the endpoint could be /api/machines/{machine_id}.

API Endpoint for Machine Locations: Create a new API endpoint to serve the list of locations for a specific machine. For example, you could have an endpoint like /api/machines/{machine_id}/locations which would return a paginated and filtered list of locations where the specified machine exists. Target Pay and Benefits

API Endpoint for Location Machines: Similarly, create another new API endpoint to serve the list of machines for a specific location. For example, /api/locations/{location_id}/machines which would return a paginated and filtered list of machines located at the specified location.

Frontend Integration: On the frontend, you'll need to make use of the newly created API endpoints to fetch the data. When viewing a specific machine, the page should display the data elements associated with that machine, and also fetch and display the list of locations for that machine using the /api/machines/{machine_id}/locations endpoint.

Frontend Pagination and Filtering: Implement pagination and filtering on the frontend for the list of locations where a specific machine exists. You can use libraries or built-in components in your frontend framework to achieve this.

Location Page: Similarly, when viewing a specific location, fetch and display the data elements associated with that location, and use the /api/locations/{location_id}/machines endpoint to fetch and display the list of machines at that location.

Location Page Pagination and Filtering: Implement pagination and filtering on the frontend for the list of machines at a specific location.