how to create a beautiful navigation dashboard

[Tom Tang 2]

I have severail reports and want to create a navigation page which includes hyperlinks to these reports,

are there any good suggestions to building a good looking navigation page.

what I can think of is to use text area and button to fulfill navigation, but I guess it won't be a good looking,

just want to brainstorm ideas here, thanks!

[Colin Gray 3]

Hi there,

I always build navigation like you say for every Spotfire tool I make. You can use text areas and then by editing the HTML, you can include javascript and CSS which allows you to style buttons and links, as well as include other nice navigation ideas such as accordions, or menus as you please.

Depending on your Spotfire server settings you make have to add Css via javascript.

 

See this post

https://community.spotfire.com/questions/css-buttons-text-areas

What I personally do is use action controls and choose link instead of button. I then override the styling for the a tags and make them appear like nice buttons using css.

I can post an example if it would help

 

Thanks

Colin

See

[Tom Tang 2]

hi  Colin

 

thnaks for your guide, it is a good idea to use CSS/JS, but I am not a css/js guy, I am looking into it, thanks!

 

 

[Tom Tang 2]

hi  Colin

could you please share with me more of your samples on manipulating css/js for textarea elements. thanks!

one question for sample in your link:

if i add another "My Tooltip2222", and if I hover the mouse to this new one, both old and new tooptip texts will show, how do I let it show only the according one.

---adding below code in text area after your code

<div class="tooltip" style="padding-top: 20px;"><b>My Tooltip2222</b>

<span style="padding-left: 4px;"></span>

  <span class="tooltiptext">example2222</span>

 

[Colin Gray 3]

Not a problem. There are a lot of (hopefully) simple examples that I often use here:https://www.w3schools.com/css/css_tooltip.aspIf you look down the menu on the left there are many other ways to use CSS. Then it is a matter of putting it into Spotfire.For instance, I edited the HTML of a text area, and then insert Javascript (icon on ther top right). I then give the script a name and add code like this:

var css = `div.layout{  padding: 8px 4px 0 2px;  font-size: 13px;}div.layout a{	color: #26A2F0;	border: 1px solid #4c9ece;	background: #fff;	padding: 2px 0px 2px 0px;	cursor: pointer;	border-radius: 6px;	-moz-border-radius: 6px;	-webkit-border-radius: 6px;	height: 19px;	font-weight: 500;	font-size: 14px;	width: 180px;	display: inline-block;	text-align: center;}div.layout a:hover{	background: #e3f3fc;	cursor: hand;	text-decoration: none;}div.layout a:active {	position:relative;	top:1px;}div.layout input {	height: 22px;}/* Accordion Section */.accordion {  background-color: #ebfaeb;  color: #444;  cursor: pointer;  padding: 8px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 14px;  transition: 0.2s;}.active, .accordion:hover {  background-color: #adebad;}.accordion:after {  content: ' 02B';  color: #777;  font-weight: bold;  float: right;  margin-left: 5px;}.active:after {  content: "2212";}.accordion-panel {  padding: 2px 4px 4px 0px;  background-color: white;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;}`;$("<style/>").text(css).appendTo($("#styleDiv"));

 Then to my textarea I put right at the top:<div id="styleDiv"></div>This means the CSS styling in my Javascript file gets inserted in the div tag above. So after that if I use any class/id in a HTML tag it will get styled if it matches a tag in my css. So for example, if I add an action control, set it to be a link rather than a button and wrap it in a div with the class layout, my link will look like this instead of a standard link:So the code to do this looks like:<div class="layout">

   <SpotfireControl id="82377e0cf68a4ffab2c709e0269582df" />

</div>So all I have done is wrap the SpotfireControl tag created when I made my action control button, inside a div tag with the class layout. That means from the CSS in the javascript above becuase a link action control in Spotfire is rendered as a 'a' (anchor) tag, I can override its style. The reason I wrap this inside a div with a specific class is so that I only override the style of 'a'/links I want to. Spotfire may use these link/a tags elsewhere and if you change the styling of just all links, it may affect other parts of your analytics tool.

[Tom Tang 2]

hi  Colin

 

thanks for your deep, thorough guide, I got the overview of it, though I need some time on html/css stuff, but its a good start.

 

 

[Dejan Zamurovic 2]

Hi spotfirefighter,

In addition to Colin's tips, I just published a blog on the Tibco community site that might help you get ideas. It also contains links to dxp templates that you can use for your purpose.

https://community.spotfire.com/feed-items/making-data-look-good

 

Kind regards,

[Tom Tang 2]

thanks dejanzamurovic very much!

 

will look into it