I want to add different icons for different items in a tree so anyone can plz help me with how to do it. I had tried to use an HTML and CSS type platform to enter an image that I have saved in my shared component files in place of the icon but it didn't help me a lot.
1 Answers
In the sql query for the tree component, add a column with a font apex class. Note that it needs to be prefixed with 'fa', so if you want class 'fa-rocket' the icon column needs to have 'fa fa-rocket' as data.
Here is an example, based on this question:
Source:
SELECT id, parent_id, name || ' - ' ||LOWER(type) as name, icon
FROM
(
SELECT 'B-'||branch_id as id, null as parent_id, 'BRANCH' as type, branch_name AS name, 'fa fa-tree' as icon FROM branch
UNION ALL
SELECT 'D-'||dept_id as id,
CASE WHEN parentid IS NULL THEN 'B-'||branch_id ELSE 'D-'||parentid END as parent_id, 'DEPT' as type, dept_name AS name, 'fa fa-rocket'
FROM t_dept
UNION ALL
SELECT TO_CHAR(int_sect_id) as id, 'D-'||dept_id as parent_id, 'SECT' as type, sect_name AS name, 'fa fa-battleship' FROM sects
)
START WITH parent_id IS NULL
CONNECT BY (prior id = parent_id)
Then in the tree attributes > Settings, set the "icon CSS class" attribute to the column that has the icon class:
The results should be this:
Related