Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Sample code, please, to show how to add stuff inside the Tabstrip

SAP doesn't have great document for sample code written in .Net

Okay, there is the Tabstrip object.

Then, there is the Tab object that is added to the tabstrip.

Then, there is the Caption object that is added to the tab to display the tab Header.

What is the name of SAP Web control class to add the tab's body to the tab, in asp html please also? Thank you.

(A descent example of code snippet of how to create a tabstrip would be nice. Thank you.)

Former Member
replied

Hi Steve,

Documentation exteneded from version to version.

For example, How to use the TabStrip Control example added to PDK 2.5 documentation. As you use PDK 2.0, I'll paste here the example for you.

Regards,

Rima.

      • Using the TabStrip Control ***

The SAP NetWeaver .NET TabStrip control enables creation of tabbed content in portal components. The following examples demonstrate how to use the TabStrip control with the TabContent component. TabContent is a portal component that represents a tab in the TabStrip control.

      • Adding Tabs to a TabStrip Control ***

1. Create a new SAP Portal Application project. A new portal component named PortalComponent1.ascx is automatically added to the project.

2. In Solution Explorer, right-click your SAP Portal Application project, and select Add -> Add New Item. In the Templates pane, click TabContent, and click Add.

3. Repeat this step to add another TabContent component.

4. In the project, open the PortalComponent1.ascx in Design view.

5. From the SAP NetWeaver pane in the Toolbox, drag a TabStrip control onto the component.

6. Right-click the TabStrip control and select Edit Tabs from the context menu.

7. In the Tabs Collection Editor, click Add to add the first tab member and set its contentPath property to TabContent1.ascx.

8. Add the second tab member and set its contentPath property to TabContent2.ascx, and click OK to close the Collection Editor.

You can now add controls and code to manipulate the tabs. It is possible to implement server-side eventing between the tabs.

      • Passing Parameters between the Tabs ***

The following example demonstrates how to pass parameters between tabs.

1. In the project you have created, open the TabContent1 component in Design view, and add two Label controls, two InputField controls and a Button control.

2. Open the code-behind class and create a string property by adding the following code to the class:

string _p1;

public string Prop1

{

get

{

return (InputField1.Value + " " + InputField2.Value);

}

set

{

_p1=value;

}

}

3. Add the following code to the Button1_Action event handler to switch to the second tab:

private void Button1_Action(object sender, SAP.Web.UI.Controls.AbstractButton.ActionEventArgs e)

{

this.ContainingTab.TabStrip.SelectedTab=("Tab2");

}

4. Open the TabContent2 component in Design view and add a Label control.

5. Open the code-behind class of the TabContent2 component and add code to retrieve the parameter from Tab1 and display it in the label:

private void Page_Load(object sender,System.EventArgs e)

{

Label1.Text = ((TabContent1)this.ContainingTab.TabStrip.Tabs[0].TabContent).Prop1;

}

When the second tab is activated, the label displays input data from the first tab.

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question