display sub resource as list inside show of parent item.
Hi, I am building a real estate bidding cms system. I have a resource called building and it has a many sub resources called bids who are unique to that building. How can I show a list with bids inside the single show building page and allow crud actions on the bids
8 Replies
Hi @blackbearftw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To display a sub-resource as a list inside the show page of a parent item, you can use the
Show
component from Refine. This component provides layout views based on the resource information automatically.
You can create a Show
page for the building
resource and inside this page, you can embed a List
view for the bids
sub-resource. This List
view can include CRUD actions for each bid.
Here is a basic example of how you can structure this:
In this example, EditButton
and DeleteButton
are used to provide CRUD actions for each bid. You can customize this as per your requirements.
Please note that this is a simplified example and you would need to fetch the data for the building and bids, handle routing, and so on. You can refer to the Refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog) for more detailed guides and tutorials.
For more complex parent-child resource relationships, you can also check out these examples:
- Strapi v4 Multi-tenancy (https://refine.dev/docs/advanced-tutorials/multi-tenancy/strapi-v4/#what-is-multitenancy)
- Appwrite Multi-tenancy (https://refine.dev/docs/advanced-tutorials/multi-tenancy/appwrite/#what-is-multitenancy)
- Multi-level Menu (https://refine.dev/docs/advanced-tutorials/multi-level-menu/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•9mo ago
@kapa.ai alright and for the parent (building) I would like to have 3 fields that are kinda unusual:
1. A gallery field, that allows multiple images to be uploaded.
2. A field that allows the uploading of multiple files
3. A google maps field that allows the selection for coordinates on a map
Let me check the knowledge base for you. One moment! :books:
----------------------
To implement these fields in your
building
resource, you can use the following components provided by Refine:
1. Gallery Field: Refine doesn't provide a built-in gallery field, but you can create a custom field that allows multiple images to be uploaded. You can use the FileField
component as a base and extend it to support multiple files. You can refer to the FileField documentation (https://refine.dev/docs/ui-integrations/ant-design/components/fields/file-field/) for more details.
2. Multiple Files Upload Field: You can use the FileField
component for this purpose. This component is built on top of the Ant Design's Upload component and provides the logic for file uploading. You can set the multiple
prop to true
to allow multiple files to be uploaded. Here is the FileField documentation (https://refine.dev/docs/ui-integrations/ant-design/components/fields/file-field/).
3. Google Maps Field: Refine doesn't provide a built-in Google Maps field. However, you can create a custom field using a Google Maps React library such as react-google-maps
or @react-google-maps/api
. These libraries provide components that you can use to display a Google Map and select coordinates.
Please note that these are advanced customizations and you might need to have a good understanding of React and Refine to implement them. You can refer to the Refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog) for more detailed guides and tutorials.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•9mo ago
@kapa.ai what is the best place to create and store this custom google maps input field?
Let me check the knowledge base for you. One moment! :books:
----------------------
The best place to create and store your custom Google Maps input field would be within your project's
src
directory, in a dedicated components
or inputs
folder. This way, you can easily import and use it across different parts of your application.
Here's a basic directory structure:
In this structure, GoogleMapsInput.tsx
is your custom Google Maps input component. You can then import this component in your resource files (like new.tsx
or edit.tsx
for the building
resource) like so:
Remember to export your GoogleMapsInput
component from the file:
This approach helps in maintaining clean code structure and promotes reusability of components. For more information on how to structure your project, you can refer to the Refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below