# \[UI Suggestion\] Tabbed component inside device-page

**URL:** <https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708>\
**Category:** Uncategorized\
**Created:** [June 12, 2022, 4:39am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708 "2022-06-12T04:39:54Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![cdavid14](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/cdavid14/32/898_2.png) [@cdavid14](https://forum.genieacs.com/u/cdavid14)\
**Post date:** [June 12, 2022, 4:39am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/1 "2022-06-12T04:39:54Z")

</div>

Hello Everyone,

I wanna to know how much acceptable could be the idea to create a tabbed component inside device-page to display different informations.  
My idea is that this component will come with some default tabs (such as Info, LAN, etc) and the tab names as his contents could be filled as configuration parameters.

This will help people that directly works with genieacs ui to organize the CPE informations as needed.

I haven’t developed this yet, i just want to know if this feature is really needed and them, if this community approves, i could contribute with this project with this feature.

Best regards,

---

<div class="post-metadata">

**Author:** ![cdavid14](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/cdavid14/32/898_2.png) [@cdavid14](https://forum.genieacs.com/u/cdavid14)\
**Post date:** [June 28, 2022, 3:45pm UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/2 "2022-06-28T15:45:27Z")

</div>

@zaidka could you please review this idea?

---

<div class="post-metadata">

**Author:** ![zaidka](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/zaidka/32/9_2.png) [@zaidka](https://forum.genieacs.com/u/zaidka)\
**Post date:** [June 28, 2022, 6:30pm UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/3 "2022-06-28T18:30:31Z")

</div>

Sounds like a good idea. I think it warrants being included upstream if implemented in a general enough way to serve different use cases.

Keep in mind though that for the next major release of GenieACS we’re working on making the UI almost entirely customizable (no patching necessary) where you can create custom components as easily as creating virtual parameters. So it remains to be seen how useful such a component (or any of the other default components) is going to be.

---

<div class="post-metadata">

**Author:** ![cdavid14](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/cdavid14/32/898_2.png) [@cdavid14](https://forum.genieacs.com/u/cdavid14)\
**Post date:** [May 20, 2023, 2:20am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/4 "2023-05-20T02:20:34Z")

</div>

![Gravação de tela de 19-05-2023 22_49_04 (1)](https://canada1.discourse-cdn.com/flex035/uploads/genieacs/original/2X/2/2f6681dba13f1c488ea00017d75866b4964378c0.gif)

almost a year later, I got some time to implement this function, in resume, if the user want to use no-tabbed device-page, just don’t fill the “device tabs page” option in config, but when it is filled, it ignores “device page” configuration, without delete it, and use the tabbed configuration instead.

![ddac5fdf-6938-4a82-8846-f3bd615c6b9a](https://canada1.discourse-cdn.com/flex035/uploads/genieacs/original/2X/c/c476edd0d09cd5b5ad906141ffa643218d8bd00c.png)  
The structure of the tabbed page looks simple, has only 3 parameters:

- label (The displayed name of tab)
- route (The routing name of the tab, that will be like #!/device/\< ID \>/\< ROUTE \>)
- components (The components that should be visible on current tab)

If no tab route is specified, first tab configured will be displayed.

I know that has some CSS fixes to do but, please see if this concept looks good to you @zaidka , if so i will proceed with pull request to code review.

Best regards.

---

<div class="post-metadata">

**Author:** ![frtnrn](https://avatars.discourse-cdn.com/v4/letter/f/ecd19e/32.png) [@frtnrn](https://forum.genieacs.com/u/frtnrn)\
**Post date:** [June 14, 2023, 7:50am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/5 "2023-06-14T07:50:46Z")

</div>

Hi Cdavid14 , thanks for great effort can you add also same feature to overview page?

---

<div class="post-metadata">

**Author:** ![cdavid14](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/cdavid14/32/898_2.png) [@cdavid14](https://forum.genieacs.com/u/cdavid14)\
**Post date:** [June 14, 2023, 8:11am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/6 "2023-06-14T08:11:07Z")

</div>

Hi @frtnrn , this feature at devices page could be easily integrated in overview context, but still as a draft on github as i’m waiting @zaidka avaliation (and bless) to release it, when the final PR’s ready, i will open a new one to this feature.

---

<div class="post-metadata">

**Author:** ![manyendok](https://avatars.discourse-cdn.com/v4/letter/m/a9a28c/32.png) [@manyendok](https://forum.genieacs.com/u/manyendok)\
**Post date:** [April 22, 2024, 11:49am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/7 "2024-04-22T11:49:00Z")

</div>

how to add device tab page

---

<div class="post-metadata">

**Author:** ![yodistha](https://avatars.discourse-cdn.com/v4/letter/y/7ba0ec/32.png) [@yodistha](https://forum.genieacs.com/u/yodistha)\
**Post date:** [June 30, 2024, 2:50pm UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/8 "2024-06-30T14:50:35Z")

</div>

good, I’ll try.

---

<div class="post-metadata">

**Author:** ![anyr](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@anyr](https://forum.genieacs.com/u/anyr)\
**Post date:** [September 16, 2024, 3:18pm UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/9 "2024-09-16T15:18:13Z")

</div>

Hi @cdavid14  
Would you share how did you patch the ui for create/show the new “devie tab page” in admin \> config?

Appreciated if you can share the details.  
Thank You very much!

---

<div class="post-metadata">

**Author:** ![elvismgs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/elvismgs/32/2066_2.png) [@elvismgs](https://forum.genieacs.com/u/elvismgs)\
**Post date:** [October 17, 2024, 9:59pm UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/10 "2024-10-17T21:59:00Z")

</div>

hello @cdavid14  
Could you share the structure of your deviced page so we can see what its structure would be? I’m wanting to implement these tabs in my acs.

---

<div class="post-metadata">

**Author:** ![cdavid14](https://yyz1.discourse-cdn.com/flex035/user_avatar/forum.genieacs.com/cdavid14/32/898_2.png) [@cdavid14](https://forum.genieacs.com/u/cdavid14)\
**Post date:** [October 18, 2024, 12:30am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/11 "2024-10-18T00:30:37Z")

</div>

Hi Everyone, i hadn’t time to do a best approach to this feature, and the PR #389 was reproved, so the idea is there, if someone can do a better approach is welcome, or maybe i’ll do it when i have more time

my mods: [Device tabs initial implement · cdavid14/genieacs@20e4371 · GitHub](https://github.com/cdavid14/genieacs/commit/20e4371d6bf86f70f73282340bb14dbd18109433)

---

<div class="post-metadata">

**Author:** ![Kim-Gambit](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kim-Gambit](https://forum.genieacs.com/u/Kim-Gambit)\
**Post date:** [November 18, 2024, 4:42am UTC](https://forum.genieacs.com/t/ui-suggestion-tabbed-component-inside-device-page/2708/12 "2024-11-18T04:42:00Z")

</div>

How do I guess this piece of code doesn’t work?

- label: “‘Other’”  
route: “‘other’”  
components:
  - element: “‘div’”  
type: “‘container’”  
components:
    - element: “‘h3’”  
type: “‘container’”  
components:
      - “‘Faults’”

    - type: “‘device-faults’”

  - element: “‘div.container-full.width’”  
type: “‘container’”  
components:
    - element: “‘h3’”  
type: “‘container’”  
components:
      - “‘All parameters’”
      - type: “‘all-parameters’”
