Hierarchical component

[cod3rshotout]

A client has asked me to create a hierarchical data visualization. Specifically, the data needs to be arranged to display the service type as the root of the processes. The structure should look like this:

Service Type 1
    Process 1
    Process 2
    Process 3

Service Type 2
    Process 4
    Process 5
    Process 6

Could someone explain how I could create this kind of visualization in Laravel Backpack? The grid should also have filters so that users can customize the interface and data. Please let me know; this is very urgent.

[backpack-ai-bot[bot]]

To create a hierarchical data visualization with filters in Laravel Backpack, you have a few options, but there isn't a built-in solution that exactly matches your requirements. However, I can suggest a couple of approaches based on the available information:

1. Using the select2_grouped field:
   One developer created a custom select2_grouped field that allows for hierarchical structures. While this isn't exactly what you're looking for, it could be adapted to fit your needs. The developer mentioned this in a GitHub issue discussion Backpack GitHub Issue.

2. Custom implementation:
   You would need to create a custom solution using Laravel's standard features and Backpack's UI components. Here's a general approach:

   a. Create a controller that fetches and organizes your data hierarchically.
   b. Create a custom view that displays this data in the structure you want.
   c. Use Backpack's UI components and AdminLTE (which Backpack uses) to style your view.
   d. Implement filters using Backpack's filter functionality.

For the filters, you can use Backpack's built-in filter system. Here's a relevant quote from a Backpack contributor:

Backpack uses AdminLTE (built on twitter bootstrap) so that might contain some javascript components you can use, if you visit the AdminLTE website, you'll be able to see everything it can do.

Backpack GitHub Issue

For charts and visualizations, Backpack PRO offers a chart widget that might be useful:

Quickly add bar charts, line charts and pie charts to your dashboards - using the `chart` widget.

Backpack PRO Features

However, this might not directly solve your hierarchical visualization need.

Given the urgency and specificity of your request, you might need to create a custom solution using Laravel's standard features and Backpack's UI components. If you need more detailed guidance, I recommend checking out Backpack's documentation or reaching out to their community forum for more specific advice.

Relevant sources:

Github Issue (closed): Reporting and charts
Github Issue (closed): hierarchical select field : order and hierarchy in select entries
PRO for unlimited projects|Chart widget
PRO for unlimited projects|Chart widget
Set up relations with additional information
|Demo
Widgets|Chart PRO Part 1
Github Issue (closed): [Feature] Implementation of laraberg in backpack for batter page builder
Show Operation|How to add custom sections(aka. Widgets) Part 1
Github Issue (closed): [Feature Request] Multiple level sidebar menu
Backpack for Laravel - Community Forum|Backpack for Laravel - Community Forum Part 2
Tutorials for the admin UI|Tutorials Part 3
Demo|Demo

[karandatwani92]

Hey @cod3rshotout

Are you looking for Reorder Operation? This lets admin to reorder & nest entries.

[cod3rshotout]

Hi @karandatwani92 thanks for the answer, I'm looking for a hierarchical datatable, something like this:
https://stackoverflow.com/questions/52039222/how-to-implement-hierarchical-multilevel-datatable-in-javascript
https://community.dataiku.com/discussion/15831/improve-user-experience-for-hierarchical-data

I simply need as a root element the "service type", and when the user click a service type then the other rows appear as nested childs.

[karandatwani92]

Hey @cod3rshotout

• Backpack supports Datatable's row_details feature. It is documented here.
• if you are looking for row_grouping. This does not come out of the box.

[cod3rshotout]

@karandatwani92 hi, sorry for late reply .. thanks for your response, anyway could you suggest the best approach to replicate this using backpack: https://stackoverflow.com/questions/18274826/sorting-table-with-hierarchical-data
or maybe there is a custom addon to do that? thanks

[karandatwani92]

Right now, I think of method overriding, modifying ListOperation API response and list view according to the requirement.

I can imagine myself creating a copy of the list view blade file, modifying its datatables config and overriding list operations methods in the controller:

• overriding index() method to pass the custom list view.
• overriding search() method to modify API response.

[cod3rshotout]

@karandatwani92 thanks for the answer and happy new year! is there a way to contact you directly? I would like to know if you can offer me support in the development of this component (for a fee of course)