Configuring Dynamically Customized Collaborative Portals for Multiple SaaS Tenant Groups

In this section:

How to:

If your organization supports a diverse range of customer groups that cover multiple corporate entities or geographic regions, you may need to create portals that make a single set of information available to a variety of groups using a variety of corporate identities.

By organizing users from different functional or business groups into SaaS tenant workspaces and creating customized themes and logos for each one, you can create portals that make the same information available to diverse customer groups in multiple customized environments.

In this specialized portal configuration, each tenant workspace contains the users assigned to a specific entity. As shown in the following image, they also contain files for the logo and theme that customize the portal interface to a look and feel that is familiar and appropriate for the members of the selected group.

A centralized workspace containing users from all tenant groups supports the portal itself. All development and maintenance of portal content take place within the centralized workspace, maximizing the efficiency of information delivery.

Users assigned to individual SaaS Tenant groups view these centralized portal pages using the logo and tenant theme that is appropriate for their group.

To allow for varying themes and logo files, the centralized portal uses symbolic IBFS Paths to present users with the portal theme and logo assigned to their group. Symbolic IBFS paths use pre-configured variables, such as ##{WF_PrimaryGroup}, to create a relative path to these resources that are resolved when a user runs the portal.

Once established, the Portal uses relative paths to theme and logo file images stored in SaaS tenant groups and provides administrators with a customized user interface that is efficient and easy to maintain.

Procedure: How to Understanding the Configuration Requirements for Collaborative Portals That Use Multiple Themes or Logos

The configuration of a Collaborative Portal that supports multiple SaaS Tenant groups with varying themes and logos is a multiphase process that requires the creation of tenant workspaces for each tenant group and a separate workspace for the content portal.

As a best practice, we recommend that you use the following workflow when creating a Multi-SaaS Tenant portal using symbolic IBFS paths.

  1. Have an administrator create the workspaces you will need.
    • You need a SaaS tenant workspace for each group that must use a different theme or logo.
    • You also need a separate enterprise workspace to contain the centralized portal that will be accessible to all tenant users.

      For more information, see the How to Create a Workspace on the WebFOCUS Home Page topic in the TIBCO WebFOCUS® Security and Administration technical content.

  2. Have an administrator or group administrator assign a sample user to each security group.
    • Assign users in each tenant group to the workspace for that tenant. Assign users to the security group whose range of privileges most closely matches their responsibilities.
    • Assign all users to the same security group in the workspace that supports the portal.

      For more information, see the How to Add a User to a Group topic in the TIBCO WebFOCUS® Security and Administration technical content.

  3. Create a Portal Page and a CSS Theme file for each tenant workspace.
    • Create tenant-specific portal pages for each tenant group that requires them within each tenant workspace.
    • Create a file named tenant_theme.css that contains classes that define the unique theme for each tenant.
    • Enter the .bip-logo class in the tenant_theme.css file and identify the address of the tenant workspace logo file in the background-image property.
    • Save the tenant_theme.css file in the Hidden_Content folder of the tenant workspace.
  4. Assign a logo file to each tenant workspace.
    • In the Hidden_Content folder, create a sub-folder entitled Images.
    • Create a logo file for each tenant and place it in the Hidden_Content/Images folder for each tenant workspace.
  5. Create a centralized portal that includes a symbolic path for Tenant-Theme.css files.
    • Create the portal in a common workspace available to all.
    • Enter the IBFS Symbolic Path to the tenant-theme.css file using the ##{WF_PrimaryGroup} variable in the Custom Theme CSS field of the centralized portal.
    • Ensure that the tenant_theme.css file identifies the location of the logo file for that workstation.
    • Because you are using IBFS paths that point to the same location in each different workspace, ensure that you use the same location and file name for the logo and theme files in each tenant workspace.
  6. Add Linked Tenant Portal Pages to the Centralized Portal.
    • Add any individual tenant pages to the centralized portal for those tenants that require them.
  7. Publish Content.
    • Publish the centralized portal and the workspace that contains it.
    • Publish all individual tenant workspaces.
  8. Test Portals.
    • Sign in as a user from each tenant group and run the portal.
    • Ensure that the logo, styling, and tenant-specific pages are appropriate.
    • Ensure that common pages are available and conform to tenant-specific styling.
  9. Have an administrator or group administrator assign all remaining users to security groups.
    • Assign all users in each tenant group to the workspace for that tenant. Assign users to the security group whose range of privileges most closely matches their responsibilities.
    • Assign all users to the corresponding security group in the workspace that contains the portal.

      For more information about assigning or mapping users to groups, see the TIBCO WebFOCUS® Security and Administration technical content.

Assigning Customized Logos to Tenant Workspaces

How to:

The symbolic path defined in the Custom Theme CSS field of the centralized portal redirects the call for a theme to a customized CSS theme file in the workspace of the user who issued the request to run the portal. In turn, the customized CSS theme file includes a property that identifies the logo to use for the tenant workspace.

This two-stage link enables users to overcome the limitation of the variable file path that can only call a single file, and ensures that the appropriate logo and theme are called for when users open the portal.

In order for this link to work successfully, each tenant workspace must contain its own tenant_theme.css file in the Hidden_Content folder, a subfolder within the Hidden_Content folder entitled Images, and its own logo image file within the Images subfolder.

Each CSS theme file must use the same name as the theme file identified in the Custom Theme CSS field of the centralized portal, "tenant_theme.css." You can use different names for logo image files, but you must ensure that the tenant_theme.css file for a workspace contains the correct name of the logo image file assigned to that workspace.

Procedure: How to Create an Image Folder in Each Tenant Workspace

  1. Sign in to WebFOCUS as an administrator, and navigate to the Workspaces area.
  2. In the Resources tree, expand the tenant workspace to which you want to add a customized CSS theme file.
  3. Under your selected workspace, select Hidden Content.
  4. In the content section, click the +Content button, point toOther, and then select Folder to open the New Folder window.
  5. Enter Images in the Title field, and select OK.
  6. Right-click the new Images folder and select Publish.
  7. Repeat steps 1 through 6 for each tenant workspace that will access the centralized portal.

Procedure: How to Upload a Logo File to a Tenant Workspace

  1. In the Workspaces area, in the Resources tree, expand the tenant workspace that contains the new copy of the logo file.
  2. In the content section, click the +Content button, point to Other, and then select Upload file to locate the logo image file.
  3. Navigate to the location of the logo file, select it, and then select Open to close the dialog box and complete the upload.
  4. Right-click the new image file and select Publish.
  5. Repeat this procedure for each tenant workspace.

Creating Tenant-Specific Theme CSS Files

How to:

The tenant_theme.css file contains the .bip-logo class that identifies the address of the tenant workspace logo file in the background-image property. It also contains any additional customizations that alter the look and feel of the default portal frame and features.

To ensure that the symbolic IBFS Path in the main portal connects to the tenant_theme.css file for every tenant, you must save it in the Hidden_Content folder of each tenant workspace and include this folder in the full symbolic IBFS path. You must also use the same name for each tenant workspace theme file, tenant_theme.css.

You can use the Page Designer to create this file interactively as described in How to How to Configure Customized CSS Theme Files for Tenant Workspaces Using the CSS Editor. As an alternative, you can use the text editor to create a CSS file and enter the classes you wish to add or modify. If you use this method, be sure to open the text editor from the Hidden_Content folder within the tenant workspace, and select the CSS format, and ensure that all entries conform to syntax requirements and include valid data.

Procedure: How to Configure Customized CSS Theme Files for Tenant Workspaces Using the CSS Editor

  1. In the Workspaces area, in the Resources tree, expand the tenant workspace that requires a customized theme.
  2. In the content section, click the +Content button, point to Other, and then select Collaborative Portal to launch the Portal Designer.
  3. On the Layout tab, in the Portal group, click the Theme button splitter, then click Launch CSS Editor to open the Styling dialog box.
  4. On the toolbar, click the Show the Element Inspector button, and then click the Inspect elements style information button.

    Your cursor changes to a crosshair. You can also click the Highlight inspected element button to pinpoint the element that you want to style more easily.

  5. Click a portal element that you want to style. In this example, click the top banner.

    The Classes field is automatically populated with the correct CSS class name for the selected element, in our example bip-banner-top.

    Note: You can also select elements from the Elements drop-down list, or, if you know the CSS class name of the element, you can type it in the Classes field. You can also use the Search field to search for a CSS class using keywords.

  6. In the CSS File Editor, click the Add Class text, type the name of your selected CSS class, preceded by a dot, and then press Enter.

    In our example, type .bip-banner-top

  7. Click the Add property text below the class and type the name of the property and the value to assign to it, separated by a colon (:). Type a semi-colon (;) at the end of the statement, and then press the Enter key.

    In our example, type background-color:#56b7e6;.

    The banner instantly changes color to the specified hue, as shown in the following image.

    Note: If you have entered an invalid CSS class or attribute, the browser rejects it and the change is not reflected in the portal appearance. Any hexadecimal color value you enter is automatically converted into the equivalent RGB value.

  8. Repeat steps 5 through 7 for each component of the portal theme that you must customize for this tenant group.
  9. When your customizations are complete, add the .bip-logo class to the tenant_theme.css file as described in the following steps:
    1. In the CSS File Editor, click the Add Class text, type bip_logo, preceded by a dot, and then press the Enter key.
    2. Click the Add property text below the class name and enter: background-image:url("Images/logofilename")

      Where

      logofilename

      is the name of the image file that contains the logo.

    3. Click the Add property text below the entry and add the following properties and their values:

      background-position:center;

      background-repeat:no repeat;

      height:45 px;

      width:150 px;

      For example:

      .bip-logo
{ 
background-image:url(“Image/CompanyOneLogo.png”);
background-position:center;
background-repeat:no repeat;
height:45 px;
width:150 px;
}
  10. Click the Save button in the Styling dialog box.

    If a custom CSS file is already applied to this portal, your changes will be saved in that file. If the changes are new, the Save As dialog box opens.

  11. Navigate to the Hidden Content folder of the tenant workspace, name your new CSS file, tenant_theme.css and then click Save.
  12. Close the Styling dialog box.
  13. Click Save to save the file as tenant_theme.css in the Hidden_Content folder, and close the Portal Designer.
  14. Repeat this procedure for each tenant workspace.

Creating Tenant-Specific Portal Pages

In this section:

How to:

If an individual tenant group needs one or more portal pages that are to be visible only to members of that group, create these pages within the tenant workspace and link to them from the main centralized portal. This limitation ensures that members outside of the tenant group will not see pages intended only for the tenant group.

Procedure: How to Create a Tenant-Specific Portal Page

  1. On the WebFOCUS Hub, navigate to the Workspaces area.
  2. In the Resources tree, expand the tenant workspace to which you want to add a new portal page.
  3. In the content section, click the +Content menu, point to Other, and then select Portal Page to open the Page Designer and the Add Page dialog box.
  4. Select a template, and then click Create to open the portal page in the Page Designer.
  5. Optionally, add content to the portal page.
  6. Select the same page template as that which will be used for the main portal.
  7. Type the name of the workspace in the Title field and accept the automatically-generated counterpart in the Name field.
  8. On the ribbon, in the Preview group, select Themes, and select Configure CSS Files.
  9. Select Browse next to the Custom Theme CSS field.
  10. In the Open – IBFS:/WFC … dialog box, navigate to the Hidden_Content folder for this workspace and select tenant_theme.css.
  11. Select Open to close the dialog box and assign the customized tenant theme to the tenant-specific portal page.
  12. Click OK to close the Portal Theme Files dialog box.
  13. Save and close the Page Designer.

    The new stand-alone portal page displays in the workspace. You can now copy, move, and link this portal page to portals.

  14. Right-click the new page and select Publish.
  15. Repeat this procedure for every tenant workspace that will use tenant-specific portal pages.

Creating a Centralized Portal for Common Use

In this section:

How to:

The centralized portal contains all of the links to data sources and content that will be available to tenant users. Content pages, based on a portal template that uses a symbolic reference to tenant_theme.css files, make information available to all users in the appropriate format.

Enter the IBFS Symbolic Path to the variable style sheet file in the Custom Theme CSS field of the centralized portal. Because you are using an IBFS path that points to the same location in each different workspace, ensure that you use the same location for the logo and theme files in each tenant workspace.

Procedure: How to Create a Centralized Portal With a Symbolic Reference to Tenant Theme Files

  1. On the WebFOCUS Hub, navigate to the Workspaces view.
  2. In the Resources tree, expand the workspace for the centralized portal.
  3. In the +Content menu, point to Other, and then select Collaborative Portal to open the New Portal dialog box.
  4. Type a descriptive title for the portal in the Title field.

    As you type, WebFOCUS automatically assigns the value you type in the Title field, adjusted to conform to IBFS rules, to the Name field. You can edit or replace this value with a custom name if required.

    WebFOCUS also automatically assigns the appropriate IBFS Path to the portal, based on the location of the workspace and the title you enter, to the Path field, and an external version of the path that does not begin with the IBFS parameter in the URL field.

  5. Enter a short name to reference your portal in the Alias field.
  6. Select Create to store these values and create the portal.
  7. On the ribbon, in the Themes group, select Theme and enter the following path to the location of the theme file in the Custom Theme CSS field:
    IBFS:/WFC/Repository/##{WF_PrimaryGroup}/Hidden_Content/tenant_theme.css

    Where:

    IBFS:/WFC/Repository

    Is the opening path that identifies the IBFS system, the WebFOCUS Content subsystem, and the Repository where all content folders are located within the IBFS system.

    ##{WF_PrimaryGroup}

    Is the variable that redirects the path to the primary tenant workspace group to which the user working with the portal belongs.

    Hidden_Content/tenant_theme.css

    Is the remaining path within each tenant workspace to the file containing the theme for members of that tenant group.

    Note: You can confirm the validity of the path you use in this field by reviewing the path assigned to the tenant workspace folders in the Properties panel.

  8. Select remaining options, and add pages and other resources as described in Business Intelligence Portal technical content.
  9. When your configuration is complete, save your changes and close the Portal Designer window.

Adding Tenant-Specific Portal Pages to the Centralized Portal

How to:

To include tenant-specific portal pages in the centralized portal, you must add them as linked pages to the centralized portal.

Procedure: How to Create Additional Linked Portal Pages
  1. Right-click the collaborative portal in the centralized portal workspace and select Edit to open Page Designer.
  2. Link to an existing portal page as described in the following steps:
    1. Click the Add Page icon to open the Add Page dialog box.
    2. Select the Link To Existing Page option, as shown in the following image.
    3. In the Open dialog box, select the tenant portal page from the tenant-workspace and select Open.

      The new linked portal page displays in the portal.

  3. Repeat step 2 for each tenant-specific portal page.
  4. When you have added all of the pages linked to tenant workspace portal pages, save and close the portal.

Publishing Content

How to:

When the portal is ready and all tenant workspaces and tenant workspace groups are prepared, you must make the portal and related workspaces available by changing them to Published status to make the portal and its contents available to all users with their appropriate level of access.

Procedure: How to Publish a Portal

  1. On the WebFOCUS Hub, navigate to the Workspaces area.
  2. In the Resources tree, expand the workspace for the centralized portal.
  3. Right-click the portal in the content section of the WebFOCUS Home Page and select Publish from the shortcut menu.

Testing the Portal User Experience

How to:

Before you can announce availability of the portal for general use, you must first ensure that the appropriate theme and logo are assigned to the portal for users from each tenant group.

Procedure: How to Test the Portal User Experience

For each tenant group:

  1. Sign in as a test user from each tenant group and run the portal.
  2. Ensure that the logo, styling, and tenant-specific pages are appropriate.
  3. Ensure that common pages are available and conform to tenant-specific styling.
  4. If you encounter unexpected results, review the portal and tenant workspace configurations to ensure that your configuration conforms to the shared portal design.