How to display form entries data which is submitted through form in user interface?

Issue

• Is there any way to view form entries in a grid format by clicking a button labeled "View Form Entries." ?

Environment

• Liferay DXP 7.2

Resolution

• In Liferay DXP 7.2, the functionality to display form results in a grid format is unavailable. This feature was introduced in Liferay DXP 7.3 and later versions.
  

• However, a workaround can be implemented to achieve this functionality in Liferay DXP 7.2 using the Liferay Page Fragment and Headless Form API.
  

NOTE: The following resolution requires customization and should only be implemented at the discretion of your team. Liferay Support will not be able to assist with designing or implementing customizations.

Creating a Liferay Page Fragment:

•  Liferay Page Fragment is used to add a customizable UI component to the page where form entries need to be displayed.

• Navigate to Site Builder > Fragments > Collections and add a new fragment and name it "View Form Entries."

• Inside the fragment add a button labeled "View Form Entries." This button will trigger the API call to fetch form data.

• Now use the Liferay Headless Form API to retrieve form entries. To fetch form entries, use the following Liferay Headless Form API Endpoint:

  • GET /o/headless-form/v1.0/forms/{formId}/form-records

• Replace {formId} with the actual form ID. Configure CORS in Liferay to allow API calls from the fragment.

• Use the following JavaScript snippet to fetch and display the form entries.

• This API request returns the following data based on the provided form ID(EntryiD, status, field data, creator, Date of creation).
• Change the formId and the InnerHtml in the fragment as per your requirement.

• Use the following JavaScript snippet to fetch and display the form entries:

  • const viewEntriesButton = document.getElementById('viewEntriesButton');
    const formEntriesContainer = document.getElementById('formEntriesContainer');
    
    viewEntriesButton.addEventListener('click', async () => {
    const formId = 'your_form_id'; 
    const apiUrl = `/o/headless-form/v1.0/forms/${formId}/form-records`;
    
    try {
    const response = await fetch(apiUrl, {
    headers: {
       'Authorization': 'Basic ' + btoa('[e-mail]:test'), 
       'Content-Type': 'application/json'
    }
    });
    
    if (!response.ok) {
    throw new Error('Failed to fetch form entries');
    }
    const data = await response.json();
    
    } catch (error) {
        console.error('Error fetching form entries:', error);
    }
    });

• Now deploy the fragment to the desired page.
• Click the "View Form Entries" button to fetch and display the form entries.
• Verify that the form entries are displayed correctly.

Additional Information

• Managing Form Entries
• Setting Up CORS