Jump to content

Recommended Posts

Posted

Decription: I am working on designing a home page in Spotfire where the user can click action control items within a text area to go to different websites. I know how to do this with an action control, control type: Button as shown in thisTibco community post. I would like to use a action control, control type: Linkso I can apply a style it. Using an action control link, the text appears as a link but does not open anything.

Question: How can I either restyle the button using an edit to the javascript below or correctly use the link button to send to a link

 

Current Work

https://community.spotfire.com/questions/hyperlink-external-site

HTML code within a text area to make a button that goes to the web. Attached images show visual explanation of what I have and what I am trying to do.

 

 

 

 

Here, the button is attached to an empty ironpython script.

 

I am applying styles to the link by using the JS:

// Set up buttons using their class name and build their styling.

// I use % widths so they flex with the text area

$(".myButtons").button().css({ 'width': '10%',

'padding-top': '3px',

'padding-bottom': '3px',

'font-size': '16px',

'background':'#50535b',

'opacity':'0.9',

'margin-left':'10px',

'font-family': 'Century Gothic, sans-serif' });

 

References:

I know how to do do this with simple text:https://community.spotfire.com/questions/hyperlink-external-site

I know how to do this in a data table:https://www.tibco.com/resources/product-demonstration-video/how-make-clickable-links-spotfire-table

Java script styling adapted from here:https://community.spotfire.com/questions/tip-how-style-your-action-buttons

  • 4 weeks later...
Posted

You can use action control button itself, just modify some styles for action control button in css as below:

 

#myButtons {

width: 10%;

padding-top: 3px;

padding-bottom: 3px;

font-size: 16px;

background:#50535b;

opacity:0.9;

margin-left:10px;

font-family: Century Gothic, sans-serif

}

 

#myButtons .sfc-action-button {

background: none;

border-style: none;

}

 

 

 

 

 

 

Reference:

https://datashoptalk.com/button-style-html-css/

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