Configure the Flowtime Website

v8.3

The Flowtime website enables you to provide Flowtime experience and functionality to end users without having to install SharePoint. It provides the option to add and edit pages quite easily, and because it's a website, there is no need to compile. For more information about Flowtime, see the Flowtime documentation.

Understanding File Structure

After you install Flowtime website, there are several files you can modify that enable you to configure and edit the Flowtime website.

Flowtime website files

  • web.config
  • ASPX 
  • Control Template
  • Default.config
  • ServiceMetada config

web.config files

Allows you to control Flowtime website settings, such as culture, theme, database connection, and so on.

For example, you can set the Flowtime website language by editing the following key:
<globalization culture="en-US" uiCulture="en-US" requestEncoding="utf-8" responseEncoding="utf-8" fileEncoding="utf-8" />

ASPX files

These files define the appearance and functionality of each page on the Flowtime website. For example, the Inbox.aspx file defines the Inbox page.

Control Template files

The Flowtime website is assembled from pages that host the user controls. For example, UserMessagesGridControl.ascx is used to display the User Messages grid.

File Location: {Site Physical Path}\CONTROLTEMPLATES\Flowtime

Default.config file

This file defines the top menu links in the Flowtime website. Here you can edit links, set the URL of each link, and add links to new pages.

File Location: C:\Program Files\PNMsoft\Shared Resources\Components\Flowtime\Config\Portal\Commands

ServiceMetadata config files

This set of config files define the way columns display for each grid. For example, the setting for Messages grid coloumns is defined in the MessagesServiceMetadata.Portal.Config file. Files with the word Portal in the file name are the files that define grids in the Flowtime website.

File Location: C:\Program Files\PNMsoft\Shared Resources\Components\Flowtime\Config\ServiceMetadata

Edit the Flowtime Website

You can easily add pages, edit pages, and make other appearance and functionality changes to the Flowtime website. We'll cover some of the the most common Flowtime website modifications.

Add a new page

  1. Create an ASPX file in the site root folder.
  2. Rename the file using a meaningful name.
  3. Open and edit the file.

Example

In this example we display the Group Messages Grid control and Form Viewer control on the new page MyPage.aspx. The Form Viewer control enables you to add any form view to a page without referencing a specific process. The sections we added are highlighted.

For the controls to work, you need to add a <Register> tag for each control on the page that you add. You can find these links in the Flowtime Application in the IIS.

IMPORTANT: If you need to add your own code behind for the page, you must inherit from the PortalBasePage class from PNMsoft.Sequence.Runtime.Web.UI.dll.

<%@ Page Title="" Language="C#" CodeBehind="Default.aspx.cs"
Inherits="PNMsoft.Sequence.Runtime.Web.UI.Pages.Default" AutoEventWireup="true"
%>
<%@ Register TagPrefix="sq" TagName="GroupMessagesGridControl"
 Src="~/_controltemplates/Flowtime/GroupMessagesGridControl.ascx" %>
 <%@ Register TagPrefix="sq" TagName="FormViewerControl"
 Src="~/_controltemplates/Flowtime/FormViewerControl.ascx" %>
<asp:Content ID="Content" ContentPlaceHolderID="content" runat="server">
    <div class="sqpt-container">
      
	  <div class="sqpt-grid-control">
 <sq:GroupMessagesGridControl ID="GroupMessagesGridControl"
PageSize="5" DisplayVariables="false"
 runat="server" />
 </div>

 <sq:FormViewerControl ID="ReportsView"
FormVirtualPath="~/SequenceForms/wf/Test/Test/Form1/DefaultView.ascx"
 runat="server" />
      </div>
</asp:Content>

Add a Page that Includes a Dashboard

  1. Access the ASPX file that you created in the root folder.
  2. Add the following AnalyticsDashboardControl declaration.
    <%@ Register TagPrefix="sq" TagName="AnalyticsDashboardControl"
     Src="~/_controltemplates/Flowtime/AnalyticsDashboardControl.ascx" %>
  3. Add the following markup to the page.
    <asp:Content ID="Content" ContentPlaceHolderID="Content" runat="server">
      <div class="sqpt-container">
        <sq:AnalyticsDashboardControl runat="server" ID="AnalyticsDashboardControl" Transport="flowtime" ThemeName="Default" Mode="Auto"></sq:AnalyticsDashboardControl>
    	</div>
    </asp:Content>
    	  
  4. Configure the following properties.
    Property
    Description
    DataStreamName
    name of the dashboard suite you are using.
    Layout
    name of the dashboard from the dashboard suite that you want to display
    Transport
    by default, the Transport is flowtime. Only advanced users should modify this property.
  5. (Optional) Configure the follow properties as necessary.
    Property
    Description
    ThemeName
    by default, ThemeName is Default. The other valid value is Compact.
    Mode
    by default, Mode is Auto. The other valid values are Fixed and Fluid. This affects the dashboard layout, whether it is fixed, fluid, or set automatically.
  6. (Optional) Advanced users can configure the following properties as necessary.
    Property
    Description
    Table Title
    Parameters
    can include different context parameters, such as SolutionId of a HotOperations solution, and so on. For this to work, users should inherit the code-behind from specific classes.
    DataStreamsURL
    points to the data stream's Web service.

The final ASPX file will contain the following markup.

<asp:Content ID="Content" ContentPlaceHolderID="Content" runat="server">
    <div class="sqpt-container">
      <sq:AnalyticsDashboardControl runat="server" ID="AnalyticsDashboardControl"
Transport="flowtime" ThemeName="Default" Mode="Auto"></sq:AnalyticsDashboardControl>
    </div>
</asp:Content>

Add a Page Without the Top Menu and Side Menu

You can customize any Flowtime page so that the header and side bar do not display on the page.

Add a Link to the Top Banner

  1. Open the Default.config file.
  2. Copy a <MenuItem> section, and paste it under the existing <MenuItem> section.
    <MenuItem
      Id="Inbox"
      Command="Inbox"
      Text="{$resources.Inbox}"
      Tooltip="{$resources.Inbox}">
    </MenuItem>
  3. Edit the values in the <MenuItem> section.
    <MenuItem
      Id="MyPage"
      Command="MyPage"
      Text="My Page"
      Tooltip="MY Page">
    </MenuItem>
  4. Copy a NavigateToUrlCommand section and paste it below the existing NavigateToUrlCommand section. This section determines the URL of the link.
    <NavigateToUrlCommand
      Id="Inbox"
      Url="~/Inbox.aspx?MessageInstanceViewType=2">
    </NavigateToUrlCommand>
  5. Edit the values in the NavigateToUrlCommand section with the following information.
    <NavigateToUrlCommand
      Id="MyPage"
      Url="~/MyPage.aspx">
    </NavigateToUrlCommand>
  6. Perform IIS Reset and refresh the homepage.

Edit an Existing Page

  1. Make a copy of the page you want to edit in the root folder. For example, copy the Inbox.aspx file to the MyPage.aspx file.
  2. Edit the file as necessary. In the example below, we added a new user control to the Inbox.aspx file. The added sections are highlighted.
    <%@ Page Title="" Language="C#" MenuId="Portal" SelectedMenuItemId="MyPage" AutoEventWireup="false"
    CodeBehind="Inbox.aspx.cs"
    Inherits="PNMsoft.Sequence.Runtime.Web.UI.Pages.Inbox" %>
    <%@ Register TagPrefix="sq" TagName="InboxSummaryControl"
      Src="~/_controltemplates/Flowtime/InboxSummaryControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="NewProcessControl"
      Src="~/_controltemplates/Flowtime/NewProcessControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="ProcessesIOwnControl"
      Src="~/_controltemplates/Flowtime/ProcessesIOwnControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="UserMessagesGridControl"
      Src="~/_controltemplates/Flowtime/UserMessagesGridControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="GroupMessagesGridControl"
      Src="~/_controltemplates/Flowtime/GroupMessagesGridControl.ascx" %>
    <asp:Content ID="Content" ContentPlaceHolderID="content" runat="server">
      <div class="sqpt-container">
        <div class="sqpt-summary-controls">
          <div>
            <sq:NewProcessControl ID="NewProcessControl"
              runat="server" />
          </div>
          <div>
            <sq:InboxSummaryControl ID="InboxSummaryControl"InboxPage="Inbox.aspx"
              runat="server" />
          </div>
          <div>
            <sq:ProcessesIOwnControl ID="ProcessesIOwnControl" ProcessesIOwnPage="OpenProcesses.aspx" runat="server" />
          </div>
        </div>
        <div class="sqpt-grid-control">
            <sq:UserMessagesGridControl ID="UserMessagesGridControl"
    PageSize="30" DisplayVariables="true" ConfigName="Portal"
              runat="server" />
          </div>
            <div class="sqpt-grid-control">
              <sq:GroupMessagesGridControl ID="GroupMessagesGridControl"
    PageSize="5" DisplayVariables="false"
                runat="server" />
      </div>
    </div>
  3. Change the page reference in the Default.config file, which is located at C:\Program Files\PNMsoft\Shared Resources\Components\Flowtime\Config\Portal\Commands.
    <NavigateToUrlCommand
      Id="Inbox"
      Url="~/CustomInbox.aspx?MessageInstanceViewType=2">
    </NavigateToUrlCommand>
  4. Edit other references as necessary. For example, the Inbox Summary control.

Change the Flowtime Website Branding

To change the site's  color scheme and branding you should create your own theme.

  1. Duplicate the Sequence8 folder in C:\Program Files\PNMsoft\Shared Resources\Themes.
  2. Enter a meaningful name for the folder, such as CustomTheme.
  3. Modify the flowtimesite.css file as necessary.
  4. Chate the Theme key in the web.config file to your new folder.
    <add key="PNMsoft.Sequence.Flowtime.Theme" value="MyCustomeTheme"/>

v8.4

The Flowtime website enables you to provide Flowtime experience and functionality to end users without having to install SharePoint. It provides the option to add and edit pages quite easily, and because it's a website, there is no need to compile. For more information about Flowtime, see the Flowtime documentation.

Understanding File Structure

After you install Flowtime website, there are several files you can modify that enable you to configure and edit the Flowtime website.

Flowtime website files

  • web.config
  • ASPX 
  • Control Template
  • Default.config
  • ServiceMetada config

web.config files

Allows you to control Flowtime website settings, such as culture, theme, database connection, and so on.

For example, you can set the Flowtime website language by editing the following key:
<globalization culture="en-US" uiCulture="en-US" requestEncoding="utf-8" responseEncoding="utf-8" fileEncoding="utf-8" />

ASPX files

These files define the appearance and functionality of each page on the Flowtime website. For example, the Inbox.aspx file defines the Inbox page.

Control Template files

The Flowtime website is assembled from pages that host the user controls. For example, UserMessagesGridControl.ascx is used to display the User Messages grid.

File Location: {Site Physical Path}\CONTROLTEMPLATES\Flowtime

Default.config file

This file defines the top menu links in the Flowtime website. Here you can edit links, set the URL of each link, and add links to new pages.

File Location: C:\Program Files\PNMsoft\Shared Resources\Components\Flowtime\Config\Portal\Commands

ServiceMetadata config files

This set of config files define the way columns display for each grid. For example, the setting for Messages grid coloumns is defined in the MessagesServiceMetadata.Portal.Config file. Files with the word Portal in the file name are the files that define grids in the Flowtime website.

File Location: C:\Program Files\PNMsoft\Shared Resources\Components\Flowtime\Config\ServiceMetadata

Edit the Flowtime Website

You can easily add pages, edit pages, and make other appearance and functionality changes to the Flowtime website. We'll cover some of the the most common Flowtime website modifications.

Add a new page

  1. Create an ASPX file in the site root folder.
  2. Rename the file using a meaningful name.
  3. Open and edit the file.

Example

In this example we display the Group Messages Grid control and Form Viewer control on the new page MyPage.aspx. The Form Viewer control enables you to add any form view to a page without referencing a specific process. The sections we added are highlighted.

For the controls to work, you need to add a <Register> tag for each control on the page that you add. You can find these links in the Flowtime Application in the IIS.

IMPORTANT: If you need to add your own code behind for the page, you must inherit from the PortalBasePage class from PNMsoft.Sequence.Runtime.Web.UI.dll.

<%@ Page Title="" Language="C#" CodeBehind="Default.aspx.cs"
Inherits="PNMsoft.Sequence.Runtime.Web.UI.Pages.Default" AutoEventWireup="true"
%>
<%@ Register TagPrefix="sq" TagName="GroupMessagesGridControl"
 Src="~/_controltemplates/Flowtime/GroupMessagesGridControl.ascx" %>
 <%@ Register TagPrefix="sq" TagName="FormViewerControl"
 Src="~/_controltemplates/Flowtime/FormViewerControl.ascx" %>
<asp:Content ID="Content" ContentPlaceHolderID="content" runat="server">
    <div class="sqpt-container">
      
	  <div class="sqpt-grid-control">
 <sq:GroupMessagesGridControl ID="GroupMessagesGridControl"
PageSize="5" DisplayVariables="false"
 runat="server" />
 </div>

 <sq:FormViewerControl ID="ReportsView"
FormVirtualPath="~/SequenceForms/wf/Test/Test/Form1/DefaultView.ascx"
 runat="server" />
      </div>
</asp:Content>

Add a Page that Includes a Dashboard

  1. Access the ASPX file that you created in the root folder.
  2. Add the following AnalyticsDashboardControl declaration.
    <%@ Register TagPrefix="sq" TagName="AnalyticsDashboardControl"
     Src="~/_controltemplates/Flowtime/AnalyticsDashboardControl.ascx" %>
  3. Add the following markup to the page.
    <asp:Content ID="Content" ContentPlaceHolderID="Content" runat="server">
      <div class="sqpt-container">
        <sq:AnalyticsDashboardControl runat="server" ID="AnalyticsDashboardControl" Transport="flowtime" ThemeName="Default" Mode="Auto"></sq:AnalyticsDashboardControl>
    	</div>
    </asp:Content>
    	  
  4. Configure the following properties.
    Property
    Description
    DataStreamName
    name of the dashboard suite you are using.
    Layout
    name of the dashboard from the dashboard suite that you want to display
    Transport
    by default, the Transport is flowtime. Only advanced users should modify this property.
  5. (Optional) Configure the follow properties as necessary.
    Property
    Description
    ThemeName
    by default, ThemeName is Default. The other valid value is Compact.
    Mode
    by default, Mode is Auto. The other valid values are Fixed and Fluid. This affects the dashboard layout, whether it is fixed, fluid, or set automatically.
  6. (Optional) Advanced users can configure the following properties as necessary.
    Property
    Description
    Table Title
    Parameters
    can include different context parameters, such as SolutionId of a HotOperations solution, and so on. For this to work, users should inherit the code-behind from specific classes.
    DataStreamsURL
    points to the data stream's Web service.

The final ASPX file will contain the following markup.

<asp:Content ID="Content" ContentPlaceHolderID="Content" runat="server">
    <div class="sqpt-container">
      <sq:AnalyticsDashboardControl runat="server" ID="AnalyticsDashboardControl"
Transport="flowtime" ThemeName="Default" Mode="Auto"></sq:AnalyticsDashboardControl>
    </div>
</asp:Content>

Add a Link to the Banner

  1. Open the Default.config file.
  2. Copy a <MenuItem> section, and paste it under the existing <MenuItem> section.
    <MenuItem
      Id="Inbox"
      Command="Inbox"
      Text="{$resources.Inbox}"
      Tooltip="{$resources.Inbox}">
    </MenuItem>
  3. Edit the values in the <MenuItem> section.
    <MenuItem
      Id="MyPage"
      Command="MyPage"
      Text="My Page"
      Tooltip="MY Page">
    </MenuItem>
  4. Copy a NavigateToUrlCommand section and paste it below the existing NavigateToUrlCommand section. This section determines the URL of the link.
    <NavigateToUrlCommand
      Id="Inbox"
      Url="~/Inbox.aspx?MessageInstanceViewType=2">
    </NavigateToUrlCommand>
  5. Edit the values in the NavigateToUrlCommand section with the following information.
    <NavigateToUrlCommand
      Id="MyPage"
      Url="~/MyPage.aspx">
    </NavigateToUrlCommand>
  6. Perform IIS Reset and refresh the homepage.

Edit an Existing Page

  1. Make a copy of the page you want to edit in the root folder. For example, copy the Inbox.aspx file to the MyPage.aspx file.
  2. Edit the file as necessary. In the example below, we added a new user control to the Inbox.aspx file. The added sections are highlighted.
    <%@ Page Title="" Language="C#" MenuId="Portal" SelectedMenuItemId="MyPage" AutoEventWireup="false"
    CodeBehind="Inbox.aspx.cs"
    Inherits="PNMsoft.Sequence.Runtime.Web.UI.Pages.Inbox" %>
    <%@ Register TagPrefix="sq" TagName="InboxSummaryControl"
      Src="~/_controltemplates/Flowtime/InboxSummaryControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="NewProcessControl"
      Src="~/_controltemplates/Flowtime/NewProcessControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="ProcessesIOwnControl"
      Src="~/_controltemplates/Flowtime/ProcessesIOwnControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="UserMessagesGridControl"
      Src="~/_controltemplates/Flowtime/UserMessagesGridControl.ascx" %>
    <%@ Register TagPrefix="sq" TagName="GroupMessagesGridControl"
      Src="~/_controltemplates/Flowtime/GroupMessagesGridControl.ascx" %>
    <asp:Content ID="Content" ContentPlaceHolderID="content" runat="server">
      <div class="sqpt-container">
        <div class="sqpt-summary-controls">
          <div>
            <sq:NewProcessControl ID="NewProcessControl"
              runat="server" />
          </div>
          <div>
            <sq:InboxSummaryControl ID="InboxSummaryControl"InboxPage="Inbox.aspx"
              runat="server" />
          </div>
          <div>
            <sq:ProcessesIOwnControl ID="ProcessesIOwnControl" ProcessesIOwnPage="OpenProcesses.aspx" runat="server" />
          </div>
        </div>
        <div class="sqpt-grid-control">
            <sq:UserMessagesGridControl ID="UserMessagesGridControl"
    PageSize="30" DisplayVariables="true" ConfigName="Portal"
              runat="server" />
          </div>
            <div class="sqpt-grid-control">
              <sq:GroupMessagesGridControl ID="GroupMessagesGridControl"
    PageSize="5" DisplayVariables="false"
                runat="server" />
      </div>
    </div>
  3. Change the page reference in the Default.config file, which is located at C:\Program Files\PNMsoft\Shared Resources\Components\Flowtime\Config\Portal\Commands.
    <NavigateToUrlCommand
      Id="Inbox"
      Url="~/CustomInbox.aspx?MessageInstanceViewType=2">
    </NavigateToUrlCommand>
  4. Edit other references as necessary. For example, the Inbox Summary control.

Change the Flowtime Website Branding

To change the site's  color scheme and branding you should create your own theme.

  1. Duplicate the Sequence8 folder in C:\Program Files\PNMsoft\Shared Resources\Themes.
  2. Enter a meaningful name for the folder, such as CustomTheme.
  3. Modify the flowtimesite.css file as necessary.
  4. Change the Theme key in the web.config file to your new folder.
    <add key="PNMsoft.Sequence.Flowtime.Theme" value="MyCustomeTheme"/>

Customize Flowtime Grids

You can customize Flowime grids to add a scroll bar and aspects of cell width for Flowtime grids.

Layout

The layout determines the column and table widths. The default column width is 130. You can overwrite the default width in the service configuration file.

Layout Parameters

Parameter
Description
Auto
Column width is set according to the widest unbreakable content in the cells. This option can run slower than the Fixed option, because all content in the grid needs to be read before determining the final layout.
Fixed
This is the default configuration. Horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells. The Fixed layout enables a browser to lay out the table faster than the automatic table layout. The browser can display the table after the first row is read.

It is important to be aware of the column widths configured in the global and workflow variables.

Layout - Auto

Layout - Fixed

Adaptive

The Adaptive property defines the grid's scroll bar. By default, the Adaptive property is set to True, and the layout is set to Fixed.

Adaptive Parameters

Parameter
Description
True
Set the Kendo grid native scrollable to True when both the header and table content have their own tables. This can be used for Auto and Fixed layouts.
False
The grid does not have its own scroll bar (but the page is still scrollable).

Adaptive = True

AdaptiveHeight

The AdaptiveHeight property determines the grid's height. By default, the AdaptiveHeight property is set to -1.

AdaptiveHeight Parameters

Value
Description
>0
Custom height is used.
0
The grid determines the height.
-1
The grid auto-resizes with the page. This option is preferable for pages with a single grid.

Customize Column Width

To define local and global variables in the Process page grid, add only the the <workflowvariablescolumns> tag to the grid's ServiceMetadata.config file. Make sure you do not add both the <workflowvariablescolumns> and <globalvariablescolumns> tags.

Example

<workflowvariablescolumns>
  <ColumnTemplates>
<VariableDataBoundViewColumn
    DataField="Variable2Name" Width="200px"/>
  </ColumnTempates>
</workflowvariablescolumns>
About this Article
  • Created: 10/26/2017 12:57 pm EDT
  • Last updated: 02/19/2018 8:09 am EST
In This Article