Building Hierarchy Visualization in Glide

Community Resources
1

Hello Everyone, this week (or the former) I saw two builders mention needing some sort of hierarchy visualization in Glideapps.

I’m sure you already understand how it will work… haha

This is a Javascript code that outputs an HTML code "so ideally this can be used natively in your app or your pdf’s :slight_smile:

It needs two input values
p1: the level e.g 1, 1, 2, 4, 5
p2: The Values e.g. Micheal Adediran, Robert Kiyosaki, etc.
You can separate for the position also Micheal Adediran - Glide Developer

PS: If you need further customization or want to talk further about your build please let me know.

2024-11-10 00_04_19-Window
2024-11-10 00_04_19-Window1122×437 33 KB

2024-11-10 00_03_58-Window
2024-11-10 00_03_58-Window1131×464 33.4 KB

// @ts-ignore
return (function(p1, p2) {
   // Split and clean inputs
   const levels = p1.split(',').map(l => parseInt(l.trim()));
   const people = p2.split(',').map(p => p.trim());
   
   if (levels.length !== people.length) {
       return 'Error: Number of levels must match number of people';
   }
   
   const hierarchy = {};
   levels.forEach((level, index) => {
       if (!hierarchy[level]) {
           hierarchy[level] = [];
       }
       hierarchy[level].push(people[index]);
   });
   
   const uniqueLevels = [...new Set(levels)].sort();
   
   const getBoxStyle = (level) => {
       const maxLevel = Math.max(...uniqueLevels);
       const baseWidth = 200;
       const baseHeight = 90;
       const scaleFactor = 1 - ((level - 1) * 0.15);
       
       return `width: ${baseWidth * scaleFactor}px; height: ${baseHeight * scaleFactor}px; font-size: ${14 * scaleFactor}px;`;
   };

   
   const formatPerson = (person) => {
       const parts = person.split('-').map(p => p.trim());
       if (parts.length === 2) {
           return `<div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
                       <div style="font-weight: bold; letter-spacing: -0.3px; font-size: 1.1em;">${parts[0]}</div>
                       <div style="font-size: 0.9em;">${parts[1]}</div>
                   </div>`;
       }
       return `<div style="font-weight: bold; letter-spacing: -0.3px; font-size: 1.1em;">${person}</div>`;
   };
   
   let html = `<div style="font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px;">`;
   
   uniqueLevels.forEach(level => {
       const peopleAtLevel = hierarchy[level];
       
       html += `<div style="display: flex; justify-content: center; gap: 20px; width: 100%;">`;
       
       peopleAtLevel.forEach(person => {
           html += `<div style="${getBoxStyle(level)} background: white; border: 1px solid #CCCCCC; border-radius: 8px; padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">${formatPerson(person)}</div>`;
       });
       
       html += `</div>`;
   });
   
   html += `</div>`;
   
   return html;
})(p1, p2);

Happy Building…

3 Likes