Ask about menu depth in spotfire sidebar

[Min Su Sun]

I am creating a dashboard using Spotfire.

I created a sidebar in Spotfire by referring to the URL below.

<Reference URL>

https://community.spotfire.com/s/article/JavaScript-Sidebar-for-TIBCO-Spotfire

The sidebar sample at that URL has a menu two levels deep.

But I want the menu depth to be 3 levels.

I tried to make it level 3 by modifying javascript with the help of a web developer, but ultimately failed.

My customers and I want 3 levels of menu depth.

can i help you? I would appreciate it if you could give me a sample or method.

[Jose Leviaguirre]

Hello Min Su Sun

One way to achieve this is to use one of the sidebars or a drawer component and place an accordion inside them.

for the sidebar, place the accordion code inside the sidebar-nav element

<DIV id="sidebar" style="FONT-SIZE: 20px; BACKGROUND: #004050; COLOR: white"></DIV><span id="sidebar-logo">C. Corp</span><DIV id="sidebar-nav" > your accordion html code here</div> 

 

Attached find example code

[Min Su Sun]

​

Thank you for answer.

​

I applied the code you gave to spotfire, but an error occurs. could you please confirm?

​

<error message>

​An error occurred – /사이드바 (3)

Execution of Javascript failed:

Type: SyntaxError

Message: Unexpected token '<'

Stacktrace: SyntaxError: Unexpected token '<'

  at new Function (<anonymous>)

  at http://localhost:8009/?package=js:14:3787727

  at Array.forEach (<anonymous>)

  at Object.o [as evalCustomScripts] (http://localhost:8009/?package=js:14:3787488)

  at f (http://localhost:8009/?package=js:14:3785517)

  at tt (http://localhost:8009/?package=js:14:1347994)

  at Object.it [as success] (http://localhost:8009/?package=js:14:1348060)

  at l (http://localhost:8009/?package=js:14:46439)

  at Object.fireWith [as resolveWith] (http://localhost:8009/?package=js:14:47189)

  at b (http://localhost:8009/?package=js:14:83446)

​

​

​

[Min Su Sun]

And even though I made an html file with the sample code and ran it, the submenu doesn't even open when I click the menu.

Can you give me the source that runs normally? please.

[Min Su Sun]

Sidebar test dxp file is attached. Please confirm.

[Jose Leviaguirre]

Hello Min

I saw at your sidebar_test.dxp file. The JavaScript you added contains a mix of html and CSS tags there and it has to be all JavaScript, so I wrapped them accordingly. The html looks good, but the not the JavaScript you added to the Text Area. Attached is the corrected version that contains both scripts, the accordion an the panel code:

if you have html sanitization off, you can wrap the abobe code width the <script> html tag on the html code at the end. That approach is good while developing the code, but you will require basic html and css knowledge. Even if you don't hae these skills, you can still make changes to the colors, fonts and aesthetics of your menu and accordion. To figure out if you have html sanitization on ask your admin or create a new text area, edit the html and see if the <script> tag is supported. If you see the following error, you have html sanitation on.

I use depen.io t t to make changes, test and debug my code and then I port it to Spotfire. then I continue to refine if needed in Spotfire. The code is available here