Documentation For Tab Setup

1. Documentation for Tab Setup
The purpose of this document is to help explain the basic setup of the VIP tabbed portal and will
cover the following main points:
I. Creating new tabs
II. Setting up Filters
III. Styling the Tabs
There is an assumption in this documentation that you have a basic understanding of how to add and
edit content in the Connect interface as well as a basic knowledge of HTML and CSS.
I. Creating New Tabs
For the VIP Tab Portal to function the following JavaScript must be installed in to a content doc. For
the purposes of keeping the content well managed we normally create a content doc named “Scripts
and CSS” or something similar. In this doc, we will create a block for our JavaScript. This tab should
be named something like “Scripts for Portal.”
The script is placed into the block using the code view feature.
Paste this into the editor:
<script type="text/javascript">
var allInputs;
allInputs = document.getElementsByTagName('select');
for (i=0;i<allInputs.length;i++){
if(allInputs[i].id.indexOf('ddltext261') != -1){
allInputs[i].style.display = "none";
}
}
allInputs = document.getElementsByTagName('input');
for (i=0;i<allInputs.length;i++){
if(allInputs[i].id.indexOf('btnSID') != -1){
allInputs[i].style.display = "none";
}
}
function changePageAttribute(index){
allInputs = document.getElementsByTagName('select');
for (i=0;i<allInputs.length;i++){
if(allInputs[i].id.indexOf('ddltext261') != -1){

2. allInputs[i].selectedIndex = index;
}
}
allInputs = document.getElementsByTagName('input');
buttonName = 'btnSID';
for (i=0;i<allInputs.length;i++){
if(allInputs[i].id.indexOf('btnSID') != -1){
buttonName = allInputs[i].id;
}
}
for (i=0;i<allInputs.length;i++){
if(allInputs[i].id.indexOf('tabButton') != -1){
allInputs[i].name = buttonName;
}
}
}
</script>
<style>
#lblConfirm{display:none;}
</style>
Save and close the block.
We will need to revisit this block later to replace the number that is highlighted in yellow. This number
is different in each instance of Connect.
Next we will need to create the buttons that will become the VIP tabs. Go to the Contacts tab and
select “Attributes” from the left navigation.
Create a new attribute named “Tabbed Browsing,” field size “50,” One choice from list – Name.

3. Click “Next.”
Add the “Name Choices” with the names for your tabs.
Click “Finish”
This creates a dropdown list that we will use later to set up the tab buttons.

4. Now that the attributes are set, we will create a new content doc called “VIP Portal” or something
similar that, to you, makes sense. In this doc create a “New Attribute Question.” This choice is in the
same row of buttons as the “New Block.” Name it “Tabbed Browsing.”
Under “Step 1” click “Select Attribute” then select the “Tabbed Browsing” attribute from the list. Once
selected, the RAD editor will reappear. Go to code view and paste:
<div style="display: none;"></div>
We do this so that the Editor has the content needed to save the block, but the content itself will take
up no real space on the page.
Save the block.
We will need to get the ddltext number from the dropdown menu that now appears in the content
block. There are a few ways to get this number. In Fire Fox (you will need the developer tools) we
can control+shift+F to open the Element Information tool, then select the dropdown menu. In the
Attribute section you will see the id or the name. Find the part of the id that has ddltext and copy the
number just to the right of the text. You can also view the source, do a find for the text “ddltext” and
get the number beside this text.
Take this number and open the block where you saved the JavaScript from step one in this
document. Go to code view. Find the area that was highlighted in yellow, and replace this will the
number you just copied.
Save the block.
Next we need to create a block to house the buttons that will become the tabs. Name the block “VIP
Button Tabs” or something similar that, to you, makes sense. This block will also go into the “VIP
Portal” doc. In this block, you will need to create one button input for each attribute you want to
display on the page.
Go to code view. Then place a housing div and give in an ID(in this example I used “tabNav”) to hold
all of the inputs, then place your inputs inside.
This should look like:
<div class="tabNav">
<input name="tabButton" value="" onclick="changePageAttribute(1)" style="display: inline;" id="tabButton" class="tab1"
title="Welcome" accesskey="1" type="submit">
<input name="tabButton" value="" onclick="changePageAttribute(2)" style="display: inline;" id="tabButton" class="tab2"
title="Academics" accesskey="2" type="submit">
<input name="tabButton" value="" onclick="changePageAttribute(3)" style="display: inline;" id="tabButton" class="tab3"
title="Application Checklist" accesskey="3" type="submit">
</div>
The code must follow the following rules to work:
1. The name and the ID must NOT BE RENAMED. If they are they will not work. If you want to
give each button a unique ID for the proposes of styling, you must do this using the class.

5. 2. The onclick must be equal to changePageAttribute(1) with the number in the () representing
the number of attribute you want to call. This number is determined by the position of the
attribute in the dropdown menu.
Once you have all of the buttons set, save the block.
II. Setting up Filters
Now we create the filters that will bind the data displayed to the tab selected. Go to the Contacts tab
and Select “New” under “Contact Filters.”
Scroll down about half way and look for “Step 2: Customize and Test Filter.” Select the following in
the drop downs going from left to right:
Contact Attributes, Tabbed Browsing (or whatever you name the attribute), more in, Name of tab
You will choose “Select Values” to select the tab name and then click on the check box by the Tab
you want to make the filter for.

6. Name the Filter and save. Then repeat for each attribute.
You now will use these filters to bind your content to the different tabs. When a user clicks on a tab, a
request is sent and Connect responds, displaying the data which was set to the matching filter. This
gives the appearance of separate pages.
III. Styling the Tabs
In order to style the Tabs, we can do one of two things. We can write the styles into a content block
using style tags (<style></style>) or we can create a content block with a link to an external style
sheet (<link href="yourSheet.css" rel="stylesheet" type="text/css" />). We will create these blocks in
the “Scripts and CSS” content block, which we created in the first step in this document.
Once we decide where you want to write the styles, we can style the tabs to complement the design
of the branding. For this you will need to know how to format CSS styling or have someone at your
disposal that does. An explanation of CSS is beyond the scope of this document.
Conclusion
We have now covered the complete process installing the VIP tabbed portal. Once set up, you will
need to filter the content using the filters set up previously in this document. For more information on
this, please contact your Account Manager.
This concludes the documentation on the set up and styling of the VIP tabbed portal.