Add Comment Notes Reviews Functionality on Details Page
In this video tutorial you will understand how you can include comments, tasks and notes on your Details Page.
1. Create Task
Go to your project and click View. Then Create Task add its details and Submit.
2. Build the UI - Data Table
Go to the collection and choose Components and drop a Data Table component. Open its Settings and choose the collection and field with parent-child relationship and Save.
3. Create a Comment Note
To test you can create a comment note in the relevant collection by clicking Add Task Note and Save.
3.1 Preview the Records
Reload the Preview page and you will find the newly added comment notes here.
4. Add a Collection Form
Go to Components and drop a Collection Form. Open its Settings and choose the collection and Save.
4.1 Drop a Hidden Field Component
Go to Components and drop a Collection Form. Mention the collection, the field name and name. Then choose Type to hide/unhide the field and Save.
4.2 Preview the Changes
Reload the Preview page and you will find the details of the field when its not Hidden.
5. Create an Event
Go to Events and click Add Event. Name the event and click Create.
5.1 Configure the Event
Go to Collection and Save Data.
5.2 Add Event Details
Mention the collection name, notification messages (optional) and Save.
5.3 Add Navigation
Go to Navigation and choose Refresh Section.
5.4 Add Event Details
Mention the page name, page component, action Save.
6. Bind the Event
Go back to the page and open the Collection Form Settings and choose the event to bind and Save.
7. Test the Event
Add a new note and Submit. It will add a new note and display the notification message.
8. Changing the UI - Data Group
Instead of a Data Table you can drop a Data Group component and change the UI. Open its Settings and choose the collection and fields and Save.
9. Add Fields to Data Group
Open the field Settinsg and choose where you wnat to fetch data from and Save.
10. Preview the Changes
Reload the Preview page and you will find the new UI.
11. Update the Event
Go to the event created and instead of Data Table update it to Data Group by clciking on the circular icon.
11.1 Update the Navigation
In the Navigation add new details for the Refresh Section as per the Data Group and Save.
12. Bind the New Event
Go to the Data Group and open its Settings and choose the enw event to bind to it and Save.
13. Preview the Changes
Upload the Data Group and add a new comment note. Refresh the page and you will find the new records here.
