Jump to content

how to create a beautiful navigation dashboard

Tom Tang 2

Recommended Posts

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!

Link to comment
Share on other sites

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


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





Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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:new_1.pngSo 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.

Link to comment
Share on other sites

  • 1 month later...

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...