Navigating the ibi WebFOCUS Designer Interface

The Outline tab provides a high-level overview of all of the items in a visualization, including all pages, page sections, visualization containers, and content items. The Resources panel when the Outline tab is selected is shown in the following image.

When you first open WebFOCUS Designer, the visualization consists of a single chart or report. Only this item appears in the outline. You can right-click the item to view its WebFOCUS language source syntax.

Once additional visualizations are added, page, section, visualization, and content levels appear in the Outline, as the visualization transforms from a single content item to a page.

The item that you select for editing in the canvas is highlighted in the outline. You can also click an item in the outline to select it, as an alternative to selecting it from the canvas.

You can right-click an item in the outline to access a relevant set of options. For example, if you right-click a section, you can rename it or add a new visualization to it if you are creating new content. You can right-click a container to rename or delete it. Right-click a content item to rename it, duplicate it, or to remove it if it's in a multi-content container. If the item was created in the visualization, you can view the WebFOCUS source syntax or save the item as a separate file.

When the visualization has been transformed into a page, the outline also includes the JavaScript and CSS options, which allow you to add custom code to style and add run-time behavior to your visualization. This code can reference classes that you specify for visualization components using the Classes property.

You can click the Fields tab to display fields from the data source in the Resources panel. The Resources panel when the Fields tab is selected is shown in the following image.

You can use these fields to create content by double-clicking them, dragging them into a bucket on the Properties panel, or dragging them directly onto your content on the canvas. The bucket to which the field is added determines how the values display in your content.

If you drag a field onto an empty area of the canvas, a new container is created. If you drag a field onto the title bar of a container, you are presented with the option to replace the content in the container or add the content to the container as a new tab, accordion panel, or carousel slide. If you drag a field onto a chart, report, or map, then it is added to that content item in the default bucket for the field type.

Right-clicking a field provides further options, depending on the type of field. These options include the ability to add the field to the chart or the filter toolbar, use a dimension field as a measure or a measure field as a dimension, create bins for measure fields, or create a define field using the selected field. You can also create a define using the menu to the right of the Dimensions and Measures sections.

You can control how fields and variables are presented by using the View Selector menu, which is shown in the following image.

The following options are available:

• Field layout. Choose how the fields in your data source are organized. Folder view is the default.
  • Folder view. Organizes fields into folders based on segments and field hierarchies defined in the data source.
  • Flat view. Lists all fields in alphabetical order on the same level instead of grouping them into folders.
• Split dimensions/measures. By default, dimension fields and measure fields in the data source are separated into different sections of the Fields tab, highlighting the different roles they perform in sorting and aggregating the values in your content. You can deselect this setting to show all fields in a single pane. This option is unavailable when viewing the Variables tab.
• Field identifier. You can choose how fields are identified in the Fields tab. By default, field titles display. You can choose to show the field name or field path and name instead.
  • Show title. Displays field titles in the Fields tab. The field title is a logical name defined in the data source that is used in axis labels, column headers, tooltips, and other areas.
  • Show name. Displays field names. The field name is the literal name of the field listed in the data source.
  • Show path and name. Displays qualified field names. This option shows the field name, as well as the file and segment where the field is located.
• Enforce paths. Selecting Enforce paths means that any joins in your data are automatically checked to ensure that all fields are connected. If a field is used from a table that is not joined to another table whose fields are being used, Enforce paths will not allow that field or any other fields from the disconnected table to be used, ensuring that the request executes successfully. This option is deselected, by default.

You can search for a field or a variable using the search bar. Type a text string into the search bar text box to filter for fields or variables whose titles or names contain that string. The list of fields or variables refreshes dynamically to display values that contain the string. The string can appear at any point in the field name or title.

To clear the search query, delete your search query or click the X button in the search bar, as shown in the following image.

The search bar X button is browser dependent, so it may not appear in certain web browsers. For example, it is available in Google Chrome, but not in Mozilla Firefox.

The fields in your data source are available from the Fields tab. By default, if the data source uses folders to organize the fields that it contains, these folders are reflected in the Fields tab. This folder organization is called a business view. For dimension fields, these folders could be field hierarchies defined in the data source or segments in the data based on different tables that have been joined together. Measures can also be grouped based on segments.

Icons identify whether a folder is a basic folder or a hierarchy , and whether a field is a character , geography , date , or numeric field. Calculated fields are indicated by a function symbol added to the field icon.

By default, the Fields tab is divided into two sections, one for dimension fields and one for measure fields.

Dimension fields are categories that sort and organize the values in your data. For example, product categories, customer names, geographic locations, and dates are all commonly used as dimensions. In a chart, each value in a dimension field often defines a separate section of the chart. For example, each dimension value might be represented by a riser in a bar chart, a slice in a pie chart, or a point in a scatter plot.

Dimension fields in your data source can be organized into hierarchies, where the top field is the most general and the bottom field is the most specific. The following image shows a hierarchy of product fields.

Note: Hierarchies in cube data sources do not include a Values list in WebFOCUS Designer.

Some dimension fields can also be expanded to show attributes. Attributes are other fields that provide additional information about field values. Each attribute field value is correlated to a value of the field that it describes. For example, in the following image, the attribute fields for the Customer City field, listed in the Customer, City Details folder, provide information such as the latitude, longitude, and population of each city value.

Measure fields supply quantitative values for each category defined in a chart or report, often providing aggregated values in a report or sizing components, applying a color scale, or appearing in tooltips in a chart or map. Measure fields typically use a numeric field format. You can add up to 16 measure fields to a chart or report.

To add a field to your content, double-click the field or drag it from the Resources panel on the Fields tab into a bucket or onto the canvas. When creating a chart, different buckets are configured to use different kinds of fields. For example, in a vertical bar chart, a measure field added to the Vertical bucket is used as a measure to aggregate the sort values in the chart by determining the height of each bar. On the other hand, putting a dimension field in the Vertical bucket creates matrix rows for each dimension value, breaking the chart into multiple smaller charts. Therefore, you will typically use at least one measure field in this bucket to define different bar heights. Similarly, you will typically use a dimension field in the Horizontal bucket for a bar chart in order to determine the values that each bar represents. If you use a measure field in the Horizontal bucket using the Add as dimension option, a bar will be generated for each value in the measure field.

Some chart buckets accept both measures and dimensions but display them differently. For example, the Color bucket in a bar chart creates a color scale for measure fields, and assigns colors to values in a legend for dimension fields.

In a chart, if a bucket is designed to use only measure fields or only dimension fields, you cannot drag an incompatible field into it from the Fields tab. To indicate this, the cursor changes to a cancel sign when pointing to an invalid bucket. For example, when creating a vertical bar chart, you cannot drop a measure field into the Horizontal bucket, or a dimension field into the size bucket.

Instead, to add a measure field to a dimension bucket, right-click the field in the Fields tab and click Add as dimension. The field is added to the default dimension bucket, and appears in blue, indicating that it is a dimension, as shown in the following image.

Similarly, to use a dimension field as a measure, right-click it and click Add as measure. The field is converted to a measure by applying the CNT. aggregation function, which provides a count of data records, and added to the default measure bucket. The field appears in green, indicating that it is a measure, as shown in the following image.

You can then move the field into another bucket that accepts measure fields.

You can also right-click the aggregated dimension field in a measure bucket and point to Aggregate to change the prefix operator aggregation from count (CNT.) to count distinct (CNT.DST.), which provides the number of distinct values for the field, or percent of count (PCT.CNT.), which computes percentages based on the number of instances found.

The Tooltip bucket, meanwhile, behaves somewhat differently. The Tooltip is a measure bucket that displays field values in the tooltip when you point to an area of a chart. Unlike other measure buckets, you can drag a dimension field directly into the Tooltip bucket. The dimension is aggregated using the FST. prefix operator, so the first value of the field is displayed in the tooltip. This ensures that the dimension field generates only one value for the tooltip. The Tooltip bucket is best used when each area of the chart is associated with a single value of the selected tooltip fields. As with any bucket, you can right-click a field in the Tooltip bucket and point to Aggregate to change the aggregation.

Since reports simply display field values based on the rules for each bucket, with no dependencies based on field type, they do not have these limitations. All distinct values are shown for any field dropped into the Rows or Column Groups buckets, while values are aggregated for any field added to the Summaries bucket.

The Rows bucket creates a row for each unique value in each field within it, while the Column Groups bucket creates a set of measure columns for each unique value. These buckets sort the aggregated or detail values in the report. You can add multiple fields to the Rows and Column Groups buckets to display more granular information in a report.

The Summaries bucket aggregates measure field values for each sort value of the Rows and Column Groups fields in the report. Adding multiple fields to the Summaries bucket creates multiple measure columns in the report. These measure columns are repeated for each column group value, if there are any fields in the Column Groups bucket.

While the Summaries bucket is the default measure bucket, it is not the only option for displaying measure values. You can use the display options to change the Summaries bucket to the Counts, Details, or Details with counter bucket to display different information for the fields within it. The display options can be accessed above the buckets from the Calculation Options menu, as shown in the following image.

The Counts bucket, enabled by selecting the Counts display option , aggregates values in the report by displaying the number of records for each field within it, for each sort value. The Details bucket, enabled by selecting the Details display option , does not aggregate the values of the fields within it. Instead, it displays all values for the selected fields. The Details with counter bucket, enabled by selecting the Details with counter display option , displays all values for the selected fields, similar to the Details bucket, and also counts the rows for each primary sort field value.

You can add fields to other areas, as well. If you drag a field to the Filter toolbar, you can create a filter for the field. If the field is a character field, you can select values from a list. If the field is a numeric field, you can use a slider to specify filter values. If the field is a date field, you can use a calendar to select dates or use a predefined date range.

If you drag a field into a header or footer, the field is used as a parameter to dynamically provide a value in the header or footer text. The first value found for the field is displayed at run time. Using a field in the header or footer is especially useful if that field is also used to filter your content or if it is used as a multipage field in a chart or to create breaks in a report. The following image shows WebFOCUS Designer with the Customer Country field added to the header of a chart that is filtered to only show data for the United States.

The following image shows the chart at run time. The chart header displays United States, which is the value of the Customer Country parameter.

You can manipulate fields from the Fields tab as well. You can right-click a field to add it to your content, create a filter for it, or create a calculated DEFINE field using the field that you selected. If you right-click a dimension field, you can add it to the chart as a measure. When you do this, an aggregation function that calculates a count of the dimension values is applied to the Dimension, and the field is placed in the bucket.

Similarly, you can right-click a measure field and add it as a dimension. In this case, the measure value in each row of the data source is used as a sort value in the chart. You can right-click a dimension and click Group values to create groups, or right-click a measure and point to Bin values to create bins. Groups are groups of related values, and bins are ranges of values. You can use groups and bins to create new sort fields for your content. For example, bins are used in histograms to plot the distribution of data values. Each bin value generates in a bar in the histogram.

You can right-click a measure or dimension once they are added to your content to access additional options. For example, if you right-click a dimension added to a chart, you can change the location of the axis, the sort order, create a compute, and more, as shown in the following image.

If you right-click a measure added to a chart, you can set it to use a logarithmic scale, which is useful when there large disparities between values on the same axis, set sorting, apply an aggregation function, use a quick transform, and more, as shown in the following image.

In the Fields tab of the Data pane, you can also create a calculation that runs before aggregation (DEFINE) or after aggregation (COMPUTE) by clicking the ellipsis buttons on the top right of the Dimensions and Measures panes, and clicking Add calculation, as shown in the following image.

The Variables tab contains a list of variables and preset filters defined in your data source, as well as default system variables. To add a variable to the chart to use as a filter, drag it into the Filter toolbar.

When you assemble a page from existing content, using the Assemble Visualizations option, the Filters tab on the sidebar allows you to display and chain filter controls. When you add an existing chart or report to a page, WebFOCUS Designer identifies any parameters present in the item. A badge appears on the Filters tab on the sidebar, indicating that you can add filters to the page, as shown in the following image.

When you open the Filters tab, the Add all filters to page button and a list of parameters from the content items on the page display. Click Add all filters to page to create filter controls for all of the listed parameters, or right-click each one and click Add to page to add them individually. Once added, the visibility icon next to the parameter is no longer faded.

Below each parameter on the Filters tab is an expandable list of Bindings. The Bindings list shows the data source and target items on the page that are associated with each parameter, providing information about each filter. Click a target item in a Bindings list to briefly highlight the border of that item on the page in order to easily locate it.

Note: Numeric, date, and date-time filter bindings do not indicate the associated data source, but you can click the Info button on the Visualization toolbar to see which data sources are used for the associated target items in order to determine the data source for each filter parameter.

Filters for fields that are part of the same hierarchy in the data source are automatically chained. This means that when you select a value from one of the filter controls, the other controls are filtered and updated based on the value that you select, ensuring that you can only select valid filter values. You can also manually apply chaining by dragging one parameter onto another in the parameter list. The filter becomes a child, for chaining purposes, of the field onto which it was placed. To unchain a parameter, drag it into the empty space between the Add all filters to page button and the top parameter in the list. The parameter is removed from the chaining hierarchy and moved to the bottom of the list.

Chaining relationships are indicated by indents in the parameter list. Filter controls are chained to any filters indented under it in the list. For example, in the following image, the Category filter is chained to the Product Model filter, so when you select a category, the list of available models in the filter control updates.

In this example, selections from the Category filter do not affect the Region or Store Type filters, since they are not part of the same chaining hierarchy, and, since filtering in an assembled page is unidirectional, values selected from the Product Model filter do not chain back up to the Category filter.

The Container tab provides a selection of container types and widgets that you can use in your visualization.

The Container tab is shown in the following image.

Using this tab, you can select empty containers and widgets that you can drag to the canvas and populate with the content of your choice.

The types of containers available to you include the following:

• Basic
• Tabbed
• Carousel
• Accordion
• Grid
• Panel group

The panel, tabbed, carousel, and accordion container types are used to hold content, such as charts, reports, or images. You can add multiple content items to a tabbed, carousel, or accordion container and navigate between them using the paging behavior of the container.

When assembling a visualization from existing content, you can add multiple filter controls to cells in a grid container as an alternative to or in addition to the Filter toolbar, providing more freedom in the placement of your filter controls. The panel group container, meanwhile, can contain multiple other containers within it, allowing you to keep them together when responsive folding occurs in the visualization.

The Container tab also allows you to access the Link Tile and Explorer widgets. The Link Tile widget allows you to click through from a content item displayed on the page to a target item from your Repository. You can configure the Link Tile using the Link Tile options on the Settings tab of the Properties panel. The Explorer widget allows you to embed the Workspaces view of the Hub into a WebFOCUS Designer page that can be added to a portal, allowing users to create new content and access existing files in the Repository.

You can add existing content to a visualization from the Content tab. This content can be a WebFOCUS procedure such as a chart or report, a URL, an image, and more.

The Content area provides access to the Resources tree, where you can navigate to your content. The initial view of the Resources tree displays the directory in which the page is created. You can navigate to other workspaces and folders using the back arrow. Each item on the tree is represented by a thumbnail, making it easy to locate content. The following images show the Resources tree displaying two different levels of the repository hierarchy. The first image shows folders and items within the Portal folder.

The second image shows the content in the Small Widgets folder, within the Portal folder. You can click the name of the folder, in this case, Small Widgets, to return to the parent folder.

You can use the search bar to find an item more easily. Once you have typed a search term, to return to the view of all items, delete the text in the search bar, or, in certain browsers, click the X button.

Drag a content item onto the visualization canvas or into a container to add it. If you drag content onto a container that already contains content, you are asked whether you want to replace the content in the container or add a new tab, accordion panel, or carousel slide to it.

When assembling existing content into a visualization, you can use the Control tab to add empty filter controls, a text label, or Submit and Reset buttons to a cell in a filter control area, such as the Filter toolbar or a grid container.

The Control tab is shown in the following image.

You can add empty controls to the Filter toolbar or a filter grid if you want to select the particular types of filters to use in your page before binding specific filter parameters to them. To add an empty filter control, drag one of the following filter controls into a filter cell:

• Button set
• Calendar
• Checkbox
• Double list box
• Dropdown
• Input
• Radio
• Slider
• Submit
• Toggle

Some filter controls can only be used under specific conditions. For example, the calendar control can only be used with date and date-time fields, and the slider can only be used with numeric fields. The toggle control only takes the first two values from your data set, so it best used with Boolean fields. Others are best suited to selecting either a single value or multiple values. For example, the check box and double list box are commonly used with multi-select parameters, while the radio button control is commonly used with single-select parameters. Still others, like the input edit box and toggle control, can only accept a single value, and so should always be used with single-select parameters.

You can use a text label to add contextual information to a filter cell. The Submit and Reset buttons, meanwhile, change the filter behavior so that instead of refreshing the page to apply filtering whenever a user makes a control selection, the page does not refresh until the user clicks Submit. This is useful when you have many filter controls on a page. The Reset button allows the user to reset all filter controls to their default selections. The options on the Control tab cannot be used when creating new content in a visualization.

Once added, you can choose to delete either the Submit button or the Reset button to include the functionality of just one of these buttons.

To add a text label or Submit and Reset buttons to a visualization, drag the object into a cell in the Filter toolbar, a modal filter window, or a grid container.

You can click the Insights tab on the sidebar to easily run advanced analyses and generate visualizations and narratives on your data set, without manually preparing and analyzing your data, or having prior knowledge of data science or statistics. An example of the Insights tab with some generated content is shown in the following image.

To learn more about Automated Insights, see Generating Instant Insights in TIBCO WebFOCUS Designer.