Skip to end of metadata
Go to start of metadata

 
 
 This iBloc allows you to add a tab bar control to a page. It supports top, right, bottom and left tabs. The number of tabs and the labels can be determined manually or via data flow. When a Tab Bar widget is used in a simulation, clicking a tab changes its state to the "Selected" state, while simultaneously changing the previously selected tab to an "Unselected" state.

Key Features

A Tab Bar widget adds the following capabilities to an iRise simulation:

  • Easy creation of visually attractive tabbed menus.
  • Ability to associate tab labels with a data field that can be captured and used to control dynamic displays or navigation.
  • A unique On tab change event trigger that fires when the selected tab is changed by the reviewer.

Usage Tips 

  • Use the Tab Width property to create tabs of a consistent size.
  • Always consider the size of the container when specifying dimensions, tab spacing and a font size. Exceeding the available space will cause unexpected behaviors in the Tab Bar widget when rendered in the browser.
  • Experiment with the Tab Bar widget's formatting properties to change the appearance of the widget in the browser.
Basic Usage
  1. Drag a Tab Bar widget to the page.
  2. To add tab labels and specify a number of tabs, click the chooser button in the right side of the Tabs field in the Properties panel. The Editor box appears.
  3. In the Editor, type over the default tab labels. To increase or decrease the number of tabs, click the +Add and -Remove links as appropriate.
  4. Select a Tab Orientation for the Tab Bar widget considering the layout of your page and how the Tab Bar will be used.
  5. In the Selected Tab field, type the tab label for the tab that should be selected when the page loads.
  6. Click Done.
Capturing Data from the Tab Bar Widget

The label of the Selected tab in a Tab Bar widget can be associated with a data field and sent to a widget capable of storing data, such as a Clipboard.

  1. Add a Tab Bar widget to a page, and wrap it in a Form (right-click > Wrap in > Form).
  2. Add a Clipboard widget to the canvas.
  3. Drag the Tab Bar widget to the Clipboard and choose Send Data in the pop-up menu.
  4. In the Select a Field dialog, choose an available data field or type a new one. Data flow will be created from the Tab Bar widget to the Clipboard, and the data field properties will be displayed in the Properties panel.
  5. In the Properties panel, choose the Tab Bar widget property that you wish to send to the Clipboard (typically this will be the Selected Tab property).
  6. Add a Submit Form action to the canvas and link it to the Tab Bar widget with the trigger of your choice (typically On click).

When the page is simulated in iRise Reader, each time the reviewer triggers the Submit Form action, the value of the property you specified in step 5 will be sent to the Clipboard.

Setting the Selected Tab Dynamically

When using a Tab Bar to control dynamic behaviors, the selected tab should remain selected after the Submit Form action is triggered. Whether you are refreshing the current page or navigating to another page, follow these steps to make sure this is the case.

  1. Follow the steps above for adding a Tab Bar widget to a page and capturing the Selected Tab value as a data field. For simplicity's sake, name the data field "Selected Tab".
  2. Add a Clipboard widget to the canvas and send data flow to the Tab Bar widget. The Select a Field or Record dialog box appears.
  3. Select the Selected Tab field and click OK.
  4. Select the Tab Bar widget. In the Properties panel, click the small box to the right of the Selected Tab field to bind a data field to the property.
  5. In the Set Property pop-up window, select the Selected Tab field and click OK.
Using the Selected Tab Value to Control Dynamic Behaviors

When you bind the Selected Tab property to a data field, its value can be used to drive a variety of behaviors, including dynamic displays and navigation. Documentation for creating data-driven dynamic displays and navigation can be found in the iRise Help System (start with Adding Navigation and Interactions > Using Rules).


Known Limitations
  • Rounded tab corners do not render properly in Internet Explorer.
  • The appearance of the Tab Bar widget does not change in Studio. To see the effects of any changes you make to the Tab Bar properties in Studio, launch the page in iRise Reader.
  • For the Font Family property, only fonts that are available in iRise Studio can be selected.

iBloc Details

Type: Widget
Latest Verison: 1.2
Supported By: iRise
Samples: tab_bar.idoc (v8.5), tab_bar_multiple_pages.idoc (v8.6), Tab Bar 1.2.idoc (v8.7)


iBloc Version Studio Versions Supported Browsers
1.0 8.5, 8.6, 8.7  
1.2 8.7, 8.8 IE7, IE8, Firefox v3.5, Safari v4, Chrome v8


Special Properties

Property
Use
Expects / Produces
Name Tags a widget with a name that is referenced in Studio. It is never displayed in the browser. Text
Hidden Determines whether the widget is hidden in the browser by default (same as Hide in Browser for standard widgets). Boolean value (true or false).
Tabs Determines the text label that will appear on each tab, as well as the number of tabs in the Tab Bar and the width of each tab (unless a value is specified in the Tab Width property). An array of text values.
Tab Orientation Determines the orientation of the Tab Bar and how the Tab Bar will positioned relative to other content on the page (top or bottom for horizontal; left or right for vertical). Selection (Top, Bottom, Left or Right).
Selected Tab Corresponds to the tab label of the currently selected tab. Can be set manually (to set an initial value) or dynamically with data. Text values specified in the Tabs property.
Corner Radius Specifies the radius for rounded corners in the tabs. 0 designates square corners. Note: Rounded corners are not currently supported in Internet Explorer. 0 (for square corners) or a positive integer 1 through 20 (defaults to 5).
Tab Height (optional) Designates the height of the tabs in pixels. Should not exceed the Tab Bar widget's height. Any positive integer. Determined by height of widget if left blank.
Tab Width (optional) Designates the width of the tabs in pixels. This value multiplied by the number of tabs (plus Tab Spacing) should not exceed the Tab Bar widget's width. Any positive integer. Determined by length of tab labels if left blank.
Font Family Designates the font that will be used for tab labels. Selection (fonts available in iRise Studio).
Font Size Designates the font size that will be used for tab labels. The dimensions of the tabs should be considered when selecting a font size. Any positive integer.
Tab Spacing Determines the space in pixels between each tab. This value should be considered when specifying the Tab Bar widget's width. Any integer (defaults to 2). Negative numbers will cause tabs to overlap.

The following properties can be different for "Selected" and "Unselected" tabs.

Font Color Specifies the color of the tab labels. A hexadecimal RGB value.
Bold Determines whether a bold font face will be used for tab labels. Boolean value (true or false).
Background Color Specifies the background color for the tabs. A vertical gradient is applied by default. A hexadecimal RGB value.
Background Image (optional) Specifies a background image for the tabs. An image selected from the user's file system
Border Color Specifies a color for the tab borders. A hexadecimal RGB value.

Note: To associate a data field with one of the properties listed above, click the small square to the right of the property field. The Set Property dialog will allow you to select a data field currently flowing into the widget.

Support and Feedback

People-Powered Customer Service for iRise

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
  1. Dec 07, 2010

    Hi,

    Tab Bar ibloc cool widget. i have used and howver i was not able to retain the "Selected Tab" State.

    can anyone please help me overcome above challenge which i am facing.

    i can send idoc if needed. Please let me know.

    Thanks,
    Abhishek

    1. Dec 07, 2010

      Be sure that you are mapping whatever clipboard value that you are passing out of your iBloc back into your iBloc and set that as the "Selected Tab" property.

      For example, if I were passing the value of "Price" to my clipboard, I would also have the same value (in the example, Price) mapping back into the iBloc and set as the Selected Tab in the Properties panel.  You set this by first mapping from the clipboard into the iBloc, then selecting the small gray box to the right of Selected Tab.  This will allow you to choose which clipboard value to use.

      Hope this helps,

      Eli

      1. Dec 09, 2010

        Hi Eli,

        Thanks for your reply i tried that as well, its not working for me.

        Tab Bar Simulation steps :

        1. Add a Tab Bar widget to a page, and wrap it in a Form (right-click > Wrap in > Form).
        2. Drag a datasheet “TAB_LABLES” to the Tab Bar Widget and choose Field Name “Selected Tab”.
        3. Add a Clipboard widget to the canvas.
        4. Drag the Tab Bar widget to the Clipboard and choose Send Data in the pop-up menu.
        5. In the Select a Field dialog, I have choose an available data field “Selected Tab”. Data flow will be created from the Tab Bar widget to the Clipboard and the data field properties will be displayed in the Properties panel.
        6. In the Properties panel, choose the Tab Bar widget property that you wish to send to the Clipboard (typically this will be the Selected Tab property).
        7. Add a Submit Form action to the canvas and link it to the Tab Bar widget with the trigger of your choice (typically On click).
        8. I have also created views upon clicking on restive tab respective view should display.
        9. Drag the clipboard to views and set the rules for the views.

        can i email you the iDoc for your review.

        can you share me your email id. 

        Thanks,
        Abhishek

        1. Dec 09, 2010

          Sure.  

          ebozeman@irise.com

  2. Jan 26, 2011

    Not sure if I'm missing something, but is there anyway to choose what page you get sent to, based on which tab is selected?

    1. Jan 26, 2011

      Hi Dustin,

      Yes, there is.

      You have to capture the "selected tab" property and put it on the clipboard. Then navigate to a Decision (diamond) and use that value to control which page you navigate to from there.

  3. Jan 26, 2011

    Thanks Pete,

    Just to add to this for others, I created the tab iBloc in a master and had a clipboard sending and receiving data, so you could use it on any page.  I have a nice idoc that I'd like to include, but it will not let me add docs to this page.  Any suggestions where I could add it?  If anyone would like it, please email me dustin.bosscher@perficient.com.

  4. Jan 26, 2011

    Now that I have it in a master and it sends you to the correct page, based on the tab you select.  I'm trying to figure out how to set that tab default to the one you choose (while keeping it in one master?)

  5. Jan 26, 2011

    Nevermind.. I figured it out. I forgot that I unchecked the "Selected Tab" property checkbox.  Once you check that box and choose the correct data you want to select, you are all set.

    1. Jan 26, 2011

      Well done! Regarding posting that iBloc, no good answer right now... you could host it somewhere and created a link to that URL from this comment text.

      1. Jan 27, 2011

        Dustin, I added your sample to the info box at the top of this page. Nice work!

    2. Feb 14, 2011

      Just added a long overdue screenshot that should help clarify this step. Feedback welcome.

  6. Jul 11, 2011

    I have 2 tab bars on a page. It usually causes this error when I click on those tabs:

    A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

    _Script: http://localhost:4819/iRise/projects/46d3d43b369144438b547d29eded7773/iblocs/irise/TabControl/1.3/javascript/TabControl.js:269_

    How can I solve this?

    Thanks

  7. Jun 07, 2013

    Individual Link/ Button linking issue  

    I have created the iBloc that has 3 buttons and another ibloc that has 3 links (can add more than 3 links dynamically). However, the issue is am unable to figure out how do we link them (buttons or links) to different actions/ pages. I can refer to an Tab Bar ibloc example that is already existing on marketplace. In this we have a Selected Tab property that helps us to set the rules while linking the tabs to various actions.

    Any kind of help would be appreciated.

    -Tarak

    1. Jun 11, 2013

      Hi Tarak - can you post your question to http://community.irise.com?  We are trying to drive all Q&A traffic there...

      Thanks -