Jump to content
We've recently updated our Privacy Statement, available here. ×

Ask about menu depth in spotfire sidebar


Min Su Sun
Go to solution Solved by Jose Leviaguirre,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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> 

accordioan.gif.482df600447e176a5c9b943efdea9135.gif 

Attached find example code

Link to comment
Share on other sites

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)

image.thumb.png.70860ba29840d192ab01a1816469efa4.png

Link to comment
Share on other sites

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.

htmlsanitation.png.3b924036d278861e6070cbb280a5dcd3.pngI 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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...