Alpha DevCon 2018
Results 1 to 8 of 8

Thread: Change the color of a tab based on data

  1. #1
    "Certified" Alphaholic
    Real Name
    Larry Grupido
    Join Date
    May 2010
    Posts
    1,625

    Default Change the color of a tab based on data

    I am changing the color of a tab on a grid using the following code:

    $('{Grid.ComponentName}_TAB_1R_1.2.TAB').innerHTML = '<font style="font-weight:bold;font-style:italic;">Medical Requirements</font>';

    This is working fine.

    However, now I want to do the same thing, except on a UX, but similar code is not working:

    $('{dialog.Object}.V.R1.TAB_2.1.TAB').innerHTML = 'this is a test';

    What am I missing? I have looked at the tab inside of the developer tools and that really is it's name on the UX.

    Is there a better way?

  2. #2
    "Certified" Alphaholic
    Real Name
    Larry Grupido
    Join Date
    May 2010
    Posts
    1,625

    Default Re: Change the color of a tab based on data

    Note: I realize the example doesn't actually change the color of the tab. At the moment, I am just trying to get it to change ANYTHING. If I can get the text to change, I can change the color, weight, etc myself.

  3. #3
    "Certified" Alphaholic
    Real Name
    Lee Vasic
    Join Date
    May 2010
    Location
    Salt Lake City
    Posts
    1,089

    Default Re: Change the color of a tab based on data

    I did something like this: ColorTabs.PNG TabProperties.PNG

  4. #4
    "Certified" Alphaholic
    Real Name
    Larry Grupido
    Join Date
    May 2010
    Posts
    1,625

    Default Re: Change the color of a tab based on data

    I need it to be dependent upon data in the form. Your colors are there all the time.

    The javascript I have posted will be wrapped in an if statement. It has to be a javascript solution.

  5. #5
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,864

    Default Re: Change the color of a tab based on data

    I think this code might help to get you there. It's not {dialog.Object} to help identify the element... but rather {dialog.ComponentName}. Then... you want to go after the "style" of the element.

    Code:
    {dialog.object}.selectTabPane('TAB_1',2);
    $('{dialog.ComponentName}.V.R1.TAB_1.1.TAB').innerHTML = "Testing";
    setTimeout(function(){
    	$('{dialog.ComponentName}.V.R1.TAB_1.1.TAB').style.color = "red";
    	$('{dialog.ComponentName}.V.R1.TAB_1.1.TAB').style.backgroundColor = "blue";
    },100);
    In this code, I'm selecting a Tab Pane... and then changing the title of the Pane, it's color, and it's background color.

    The style changes are wrapped in a setTimeout() to give the Pane time to change and settle down. Without the setTimeout() the pane would begin the change, the style would change, but then Alpha's class stuff would kick in and would change the Tab color etc to whatever it's default is... and you'd never see your changes.

  6. #6
    "Certified" Alphaholic
    Real Name
    Larry Grupido
    Join Date
    May 2010
    Posts
    1,625

    Default Re: Change the color of a tab based on data

    I imagine it's the componentname part that I've got wrong.

    Thank you for setting me straight!

  7. #7
    "Certified" Alphaholic
    Real Name
    Larry Grupido
    Join Date
    May 2010
    Posts
    1,625

    Default Re: Change the color of a tab based on data

    Yes! I replaced "Object" with "Componentname" in the appropriate locations and now all is working well.

  8. #8
    "Certified" Alphaholic
    Real Name
    Lee Vasic
    Join Date
    May 2010
    Location
    Salt Lake City
    Posts
    1,089

    Default Re: Change the color of a tab based on data

    I use the local css for the tab classname. Here is the way to use the classname.
    $('{dialog.ComponentName}.V.R1.TAB_1.0.TAB').classList.add("GrBlueADTabTButtonY");
    $('{dialog.ComponentName}.V.R1.TAB_1.0.TAB').innerHTML = "Yellow Background";

Similar Threads

  1. Button Color Change Based on Data
    By jbk in forum Alpha Five Version 9 - Desktop Applications
    Replies: 20
    Last Post: 11-07-2011, 08:00 AM
  2. Button color change based on data
    By jbk in forum Alpha Five Version 10 - Desktop Applications
    Replies: 22
    Last Post: 10-27-2011, 10:07 AM
  3. Change button color if field contains data.
    By jbk in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 10-24-2011, 12:09 AM
  4. Change Data path based on login??
    By Scott Emerick in forum Application Server Version 10 - Web/Browser Applications
    Replies: 7
    Last Post: 03-03-2010, 12:10 AM
  5. Data entry field color change
    By GSI in forum Alpha Five Version 6
    Replies: 13
    Last Post: 10-26-2009, 10:15 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •