Skip to Content
Author's profile photo Former Member

SAP NetWeaver Portal, Enterprise Workspaces: Custom UI – Implement Custom Tabstrip

Enterprise Workspaces infrastructure allows you to develop your own custom UI and replace the out of the box delivered UIs. In this post, I will take the Tabstrip as an example, explain what is the Tabstrip and will describe how to develop your own custom one and replace it with the SAP’s OOTB one.

What is a Tabstrip?

The workspace tabstrip is a tabbed control through which the user accesses workspace page and workspace settings.


You can create a custom implementation of the tabstrip to control the management of pages and navigation between pages. You implement the tabstrip as a portal component.

Developing a Custom Tabstrip

The relevant APIs needed to develop your Tabstrip are contained in the packages.

The first step is to create a client-side UI (most likely a tab-bar like UI) that supports the following operations:

·         Add a new page

·         Delete a page

·         Move page (reorder)

·         Refresh page

·         Publish workspace

Developing the UI can be done using HTML and JavaScript, Flash and other UI technologies, according to the developer’s preference.

The following samples illustrate how to build and display a tabstrip according to the workspace and user information, as well as the server communication required to implement tabstrip functions listed above.

Loading tabstrip with workspace

public void buildTabstrip(IPortalComponentRequest request){

// Retrieve the launch URL of the workspace using the //com.sapportals.portal.navigation.INavigationHelperService interface

INavigationHelperService helperService = (INavigationHelperService)

INavigationNode launchNode = helperService.getCurrentLaunchNavNode(request);

String launchURL = launchNode.getLaunchURL();

// Retrieve the workspace properties required for displaying  // the tabstrip

// First get the Workspace Identifier

IWorkspaceFactory workspaceFactory = (IWorkspaceFactory) RuntimeFactory.getWorkspacesRuntime().getService(IWorkspaceFactory.class);

IIdentifier workspaceIdentifier;

if (Type.SHARED.toString().equals(request.getParameter(RequestParameters.WORKSPACE_TYPE)))


  workspaceIdentifier =


} else


workspaceIdentifier = workspaceFactory.getPersonalIdentifier(request.getUser());


//Now we are ready to get the workspace object

IWorkspaceAuthoring workspaceAuthoring = (IWorkspaceAuthoring) RuntimeFactory.getWorkspacesRuntime().getService(IWorkspaceAuthoring.class); workspace = workspaceAuthoring.getWorkspace(request, launchURL, workspaceIdentifier);

Note: workspace.toString() will retrieve a JSON representation of the workspace, which contains all the information required to render a tabstrip. The JSON string can be written to a response and used in the client.



// also exposes getters //that enables fetching data on the workspace

boolean canEdit = workspace.canEdit();

boolean canPublish = workspace.canPublish();

boolean canAddPage = workspace.canAddPage();

String workspaceName = workspace.getName();

boolean showWorkspaceDirectoryButton = workspace.showWorkspaceDirectoryButton();

String workspaceDirectoryURL = workspace.getWorkspaceDirectoryURL();

Quota quota = workspace.getQuota();

// Display the tabstrip with capabilities according to the passed parameters

// displayTabstrip method should be implemented to render the render the tabstrip UI

displayTabstrip(workspaceName, canEdit, canPublish, canAddPage, showWorkspaceDirectoryButton, workspaceDirectoryURL, quota);

// Retrieve the page properties

Page[] pages = workspace.getPages();

for (int i = 0; i < pages.length; i++) {

  Page page = pages[i];

displayPage(page.getName(), page.canBeDeleted(), page.getNavigationTarget(), page.isSelected());


//Page URL is retrieved using //page.getNavigationTarget().getURL();


private void displayTabstrip(String workspaceName, boolean enableEdit, boolean enablePublish, boolean      enableAddPage, boolean showWorkspaceDirectoryButton, String workspaceDirectoryURL, Quota quota) {

         // Display tabstrip…


private void displayPage(String pageName, boolean enableDelete, INavigationTarget navigationTarget, boolean      selected) {

         // Display page …


Implementing the Tabstrip operations

Tabstrip operations are supported both via Java public API and client JavaScript API.

   // Add a new page

   public String addNewPage(IPortalComponentRequest request, String newPageName) {       

IWorkspace workspace = getWorkspace(request);

try {

     IPage page = workspace.createPage(request.getUser(), newPageName);

     return page.getNavigationTarget().getURL();

     } catch (WorkspacesRuntimeException e) {

            throw new RuntimeException(“Failed to create page”, e);



      Add Page Client API:

EPCM.getSAPTop().WorkspaceApi.addPage(newPageName, currentPageURL, callback, evtData);

// Delete a page

public void deletePage(IPortalComponentRequest request) {

     IWorkspace workspace = getWorkspace(request);

     try {

            workspace.deletePage(request.getUser(), request.getParameter(“pageID”));

     request.getNode().putValue(“CustomTabStripEventState”, “Success”);

     } catch (WorkspacesRuntimeException e) {

            request.getNode().putValue(“CustomTabStripEventState” , “Error”);



        Delete Page Client API:

EPCM.getSAPTop().WorkspaceApi.addPage(pageName, currentPageURL, callback, evtData);

// Rename a page

public void renamePage(IPortalComponentRequest request, String newPageName) {

     IWorkspace workspace = getWorkspace(request);

  IPage pageToRename = workspace.getPage(request.getParameter(“pageID”));

     try {

             pageToRename.rename(request.getUser(), newPageName);

            request.getNode().putValue(“CustomTabStripEventState” , “Success”);

     } catch (WorkspacesRuntimeException e) {

            request.getNode().putValue(“CustomTabStripEventState” , “Error”);



        Rename Page Client API:

EPCM.getSAPTop().WorkspaceApi.renamePage(pageId, newName, callback, originalParams);

// Move a page

   public void movePage(IPortalComponentRequest request, int newPosition) {

        String pageId = request.getParameter(“pageID”);

     IWorkspace workspace = getWorkspace(request);

     try {

             IPage movedPage = workspace.getPage(pageId);

            workspace.movePage(request.getUser(), movedPage, newPosition);

            request.getNode().putValue(“CustomTabStripEventState” , “Success”);

     } catch (WorkspacesRuntimeException e) {

            request.getNode().putValue(“CustomTabStripEventState” , “Error”);



        Move Page Client API:

EPCM.getSAPTop().WorkspaceApi.movePage(pageId, currentLaunchedTarget, newPosition, callback, originalParams);

// Publish the workspace

public void publishWorkspace(IPortalComponentRequest request) {

     IWorkspace workspace = getWorkspace(request);

     try {

             workspace.setStatus(request.getUser(), Status.PUBLISHED, null);

            request.getNode().putValue(“CustomTabStripEventState” , “Success”);

     } catch (WorkspacesRuntimeException e) {

             request.getNode().putValue(“CustomTabStripEventState” , “Error”);



        Publish Workspace Client API:

EPCM.getSAPTop().WorkspaceApi.publishWorkspace(callback, originalParams);


End of the code.

Navigating to a Page on the Client Side

EPCM.doNavigate(pageURL, null, null, null, null, pageName);

End of the code.

Integrating the Custom Tabstrip

Now, let’s see how to integrate your custom Tabstrip in the UI and replace the existing out of the box one with the one you just created:

  1. Deploy your custom tabstrip      implementation to the portal and create an iView in a folder of your      choice.
  2. Add this tabstrip to the      framework page (for more information, see Adding the Tabstrip to Your Framework Page).


If the standard tabstrip has been previously added, remove it from the framework page.

OK, you are all set and ready to go.

It’s seems to be really easy to integrate your new custom UI and replace the existing ones. In this example, I demonstrated how to replace the Tabstrip, but the infrastructure enables you to do it for most of the UIs implemented and sent out of the box.

Go back to: A Deep Dive into SAP NetWeaver Portal, Enterprise Workspaces (Main TOC blog)

Assigned tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.