Configuring Dynamically Customized Designer Portals for Multiple SaaS Tenant Groups

In this section:

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 central 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 are appropriate for their group.

To allow for varying themes and logo files, the centralized portal uses symbolic IBFS Paths that 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.

Understanding the Configuration Requirements for Designer Portals That Use Multiple Themes or Logos

The configuration of a Designer 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 topic in the TIBCO WebFOCUS® Security and Administration technical content.

  2. Have an administrator or group administrator assign a sample user to each tenant workspace.
    • You need one sample user assigned to the top-level security group for each tenant workspace.

      The tenant workspace group must be defined as the primary group for each user.

    • Each sample tenant user must also be assigned to the Advanced Users 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 CSS Theme file for each tenant workspace.
    • Create a file named tenant_theme.css that contains classes that define the unique theme for each tenant.

    • 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.
    • Publish the Images folder and the logo file.
  5. Create any required tenant-specific portal pages for each tenant workspace.
    • Develop all content for the tenant-specific portal page within the tenant workspace. The use of content or data sources contained in other workspaces adds an extra group to the configuration that conflicts with the ability of the product to work with ##{WF_PrimaryGroup}.
    • Create and publish tenant-specific portal pages for each tenant group that requires them within their tenant workspace.
    • Create a shortcut for each portal page within the tenant workspace.
  6. Create a centralized portal that includes a symbolic path for tenant-theme.css files and logo image files.
    • Develop all content for centralized portal pages within the centralized portal workspace. The use of content or data sources contained in other workspaces adds an extra group to the configuration that conflicts with the ability of the product to work with ##{WF_PrimaryGroup}.
    • Create the portal in an enterprise workspace available to all.
    • Enter the IBFS Symbolic Path to the tenant_theme.css file using the ##{WF_PrimaryGroup} variable in the Theme field of the centralized portal.
    • Enter the IBFS Symbolic Path to the logo image file in the Logo field of the centralized portal.
    • Because you are using IBFS paths that point to the same location in each different workspace, ensure that you use the same location for the logo file and theme file in each tenant workspace.
  7. Add Linked Tenant Portal Pages to the Centralized Portal.
    • Copy and paste the shortcuts of tenant-specific pages that you created earlier to the centralized portal workspace.
  8. Publish Content.
    • Publish the centralized portal and all of its contents.
    • Ensure that content in all individual tenant workspaces is published.
  9. 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.
  10. Have an administrator or group administrator assign all remaining users to security groups.
    • Assign the users in each tenant group to the top-level security group for that tenant workspace.
    • Assign all users to the Advanced User security group in the workspace that supports 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 for Designer Portals

In this section:

How to:

The symbolic path defined in the Logo field of the centralized portal directs the call for a logo image to a customized logo file in the workspace of the user who issued the request to run the portal.

In order for this link to work successfully, each tenant workspace must contain its own logo file in the Images subfolder of the Hidden_Content folder within the tenant workspace.

Each logo image file must use the same name as the logo file identified in the Logo field of the centralized portal, “logo.”

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 this procedure for each tenant workspace.

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

  1. In the Workspaces area, in the Resources tree, select the tenant workspace to which you want to add a logo file, navigate to the Hidden_Content folder and then to the Images folder.
  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 for Designer Portals

In this section:

How to:

The tenant_theme.css file 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 text editor to create a .css file and enter the classes you wish to add or modify directly.

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

  1. 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 to open the Hidden Content folder.
  4. In the content section, click the +Content button, point to Other, and then select Text Editor to open the New Text Resource window.
  5. Under the Select a File Type banner, select Web, and then select Cascading Style Sheet (css) to open the Text Editor window.
  6. Enter CSS classes and CSS properties that construct the theme that is unique to this tenant group in the Text Editor window.
  7. When your customized tenant-theme.css file configuration is complete, select File and Save as, save the file as tenant_theme.css in the Hidden_Content folder of the tenant workspace, and close the text editor.
  8. In the content section of the Hidden_Content folder, right-click the new tenant_theme.css file and select Publish.
  9. Repeat this procedure for each tenant workspace.

Creating Tenant-Specific Designer Portal Pages

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.

When you have created a tenant-specific portal page, create a shortcut to it within the tenant workspace. When you create the shortcut within the tenant workspace, the rules of that workspace apply to the shortcut as well as the portal page, and the Navigation bar in the centralized portal will display an entry for the portal page only to users who belong to the tenant group.

You must develop all content for the tenant-specific portal pages within the tenant workspace. The use of content or data sources contained in other workspaces adds an extra group to the configuration that conflicts with the ability of the product to work with ##{WF_PrimaryGroup}.

Procedure: How to Create a Visualization from New Content in WebFOCUS Designer

Use the following generalized steps to create a tenant-specific visualization from new content in WebFOCUS Designer:

  1. On the WebFOCUS Hub, select Visualize Data to open WebFOCUS Designer in a new browser tab.
  2. Select the tenant workspace, and select a data source available from that workspace to load options that create a single content item.

    Note: Select only data sources that are available within the workspace. Do not use data sources outside of the workspace.

  3. Start the visualization by creating a new chart or report.
    1. From the Content picker, select a content type. You can choose from different chart types and report layouts
    2. With the Fields tab selected on the sidebar, drag fields from the Resources panel into the buckets in the Properties panel to create content.

      Or

      Double-click a field or drag it onto the canvas to add it to the default bucket for that field type.

    3. If you want to filter your content, drag the field on which the filter should be based into the Filter toolbar or Filters bucket.

      Prompted filters in the Filter toolbar affect the entire page, while static filters in the Filters bucket affect only the item for which they were created.

    4. Use the options of the Format tab of the Properties panel to style your content.
  4. To create a page that only contains a single item, select Page on the Designer toolbar and skip to step 7.

    The item moves into a container, but no second container is added.

  5. To create a page with multiple content items, select Add visualization on the Designer toolbar to turn the visualization into a page.

    The first item you created moves into a container, and a second container is created.

    1. Continue adding content to the page by dragging an existing content item from the Container tab on the sidebar, or by selecting Add visualization again to create a new container. You can then create a new content item as outlined in step 3.
    2. You can also drag a field from the field list onto an empty area of the canvas to create a new container with content using that field.
  6. Style and format areas on the page using the options on the Properties panel.

    The entire page, sections, containers, filter controls, and filter cells all have their own set of styling and formatting options.

    You can also preview the visualization to see run-time behavior by clicking Run in new window.

  7. When you have finished creating your visualization, select Save and assign a name to it.
  8. In the content section of the tenant workspace, right-click the new portal page and select Publish.
  9. Repeat this procedure for any remaining tenant workspace that requires visualizations from new content.
  10. Follow the procedure, How to How to Create a Visualization from Existing Content in WebFOCUS Designer for any remaining tenant workspace that requires visualizations from existing content.
Procedure: How to Create a Visualization from Existing Content in WebFOCUS Designer

Use the following generalized steps to create a tenant-specific visualization from existing content in WebFOCUS Designer:

  1. On the WebFOCUS Hub, select the plus button and then select Assemble Visualizations to open WebFOCUS Designer in a new browser tab.
  2. In WebFOCUS Designer, select a template for the page. You can use a predefined template, or select Blank to build the page from scratch.
  3. Add content to the page by selecting Content on the sidebar, navigating to an item in the Resources panel, and then dragging it onto the canvas.

    Or

    Create a container for an item by selecting Container on the sidebar and dragging a container onto the canvas, and then adding content to the container.

    Note: Select only content that was created within the workspace. Do not include content that was developed outside of the workspace.

  4. Continue adding content to the page by performing the following steps.
    1. Add a new container by dragging it from the Container tab on the sidebar, or selecting Add visualization.
    2. Select Content on the sidebar to access items that you can add to containers on the page or drag directly onto the canvas.
  5. Select different areas of the page, and style and format them using the options on the Properties panel.

    The entire page, sections, containers, filter controls, and filter cells all have their own set of styling and formatting options.

    You can also preview the visualization to see run-time behavior by clicking Run in new window.

  6. When you have finished creating your visualization, select Save and assign a name to it.
  7. In the content section, right-click the new portal page and select Publish.
  8. Repeat this procedure for any remaining tenant workspace that requires visualizations from existing content.
  9. Follow the procedure, How to How to Create a Visualization from New Content in WebFOCUS Designer for any remaining tenant workspace that requires visualizations from new content.
Procedure: How to Create and Publish a Tenant-Specific Page Shortcut

To limit access to a tenant-specific portal page to members of the tenant group, create the shortcut to the page within the tenant workspace. You can copy the shortcut and paste it into the centralized portal structure later.

  1. In the content section of the tenant workspace, right-click the tenant page, and select Create Shortcut.
  2. Right-click the new shortcut, and select Publish.
  3. Repeat this procedure for every tenant-specific portal page that must be included in the centralized portal.

Creating a Centralized Designer Portal for Common Use

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 Theme field and the Logo field of the main portal. Because you are using IBFS paths that point 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.

You must develop all content for the centralized portal pages within the centralized portal workspace. The use of content or data sources contained in other workspaces adds an extra group to the configuration that conflicts with the ability of the product to work with ##{WF_PrimaryGroup}.

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

  1. Navigate to the Workspaces area.
  2. In the Resources tree, select the workspace for the centralized portal.
  3. In the +Content menu, point to Application, and then select 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. Enter the following relative path to the location of the logo file in the Logo field:
    IBFS:/WFC/Repository/##{WF_PrimaryGroup}/Hidden_Content/Images/logo.png

    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

    Is the folder within each tenant workspace that contains the theme and logo files.

    Image/logo.png

    Is the remaining path within the Hidden_Content folder to the logo file. This path must be consistent in all tenant workspaces. In this example, we use a .png file, but you can use other image file formats as well.

    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.

  7. Select the layout for your portal in the Navigation field.
  8. Enter the following relative path to the location of the theme file in the Theme field and delete the default value displayed in this 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.

  9. If you want to allow users to create personal pages in this portal at run time, select the Create My Pages menu check box.
  10. Select Create to close the dialog box and create the new portal structure in the centralized portal workspace.
  11. Create pages and assemble content that must be visible to all tenant groups within the folder for the new centralized portal in the centralized portal workspace.

    Note: When creating pages for the centralized portal, you must only use content that was created within the workspace. Do not include content that was developed outside of the workspace.

Adding Tenant-Specific Portal Pages to the Centralized Designer Portal

How to:

To include tenant-specific portal pages in the centralized designer portal, you must add shortcuts for the linked pages to the centralized portal.

To ensure that tenant-specific portal pages appear only to the tenant groups to whom they apply, you must create the shortcut to the page within the tenant workspace. You must then copy the shortcut from the tenant workspace and paste it to the portal folder within the workspace that contains the centralized portal.

By creating the shortcut within the tenant workspace, you inherit the security rules of that workspace when you copy and paste the shortcut to the centralized portal workspace. As a result, the shortcuts will be visible in the navigation bar only to tenants who are members of the group.

Procedure: How to Copy and Paste Shortcuts to Tenant-Specific Portal Pages to the Centralized Portal

  1. Navigate to the Workspaces area.
  2. Expand the tenant workspace that contains the tenant page you want to include in the centralized portal.
  3. Right-click the shortcut to the tenant-specific portal page to be included in the centralized portal, and click Copy.
  4. Navigate to the workspace that contains the centralized portal.
  5. Expand the folder for the centralized portal and navigate to the location inside the centralized portal folder structure at which you want to add the page.
  6. When you reach the appropriate location within the centralized portal workspace, right-click anywhere in the content section and select Paste.
  7. Repeat steps 2 - 6 for each shortcut in your selected workspace that must be included in the centralized portal.
  8. Repeat this procedure for each tenant workspace that contains shortcuts to tenant-specific portal pages that must be included in the main portal.

Publishing Content

How to:

When the designer 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.

Procedure: How to Publish a Designer Portal

  1. Sign in as an administrator, if you are not signed in already.
  2. Right-click the portal in the content section of the WebFOCUS Hub and select Publish from the shortcut menu.

Testing the Designer Portal User Experience

How to:

Before you can announce the 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.

Remember that the portal fails to display content properly when you run it in the centralized enterprise workspace. You must base your testing on how the portal appears to users from each tenant group, not in the centralized workspace.

Procedure: How to Test the Portal User Experience

  1. Sign in as a 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.
  5. Repeat this procedure for each tenant group.