Layout Widgets

View Panel

Description

The View Panel is a composite widget which binds together a Table Layout Widget and a Search Widget. The Search Widget is a searching mechanism that retrieves items and transfers them to a Table Layout Widget to draw. The View Panel Widget is used in most of TACTIC's predefined views.

Info

Name

View Panel

Class

ViewPanelWdg

TACTIC Version Support

2.5.0 +

Required database columns

none
Implementation

The View Panel widget makes use of the TableLayoutWdg capabilities. The views available to the View Panel are identical to that of the Table Layout Widget.

Options

show_gear

Flag to show the gear menu.

show_search

Flag to show the search box.

show_search_limit

Flag to show the search limit.

show_insert

Flag to show the insert button.

insert_view

Specify the path to a custom insert view.

edit_view

Specify the path to a custom edit view.

show_commit_all

Flag to show the commit all button.

show_refresh

Display the refresh button on the shelf.

show_row_select

Flag to show row_selection.

popup

Pop the view up in a pop-up window.

layout

default, tile, static, raw, fast_table, old_table

search_type

The type that this widget works with

view

The TACTIC name for the view. e.g. admin.test_asset_tracking

do_initial_search

Run the search on loading of the view.

simple_search_view

Specify the simple search view.

custom_filter_view

View for custom filters. Defaults to "custom_filter".

process

The process which is applicable in the UI when load view is used.

mode

simple, insert

parent_key

Provides a parent item to filter in the search.

search_key

Provides the starting search key.

element_names

Provides a list of column names (ie. "preview,name,description") for the view.

schema_default_view

(INTERNAL) flag to show whether this is generated straight from the schema.

order_by

The column name to order ascending by.

search_view

(INTERNAL) View for custom searches.

width

Set the default width of the table

expression

Use an expression for the search. The expression must return items.

filter

JSON data structure representing the settings for SearchWdg
Advanced

Often, the ViewPanelWdg is defined from a side bar link. It can be defined by XML as follows

<element name='summary'>
  <display class='tactic.ui.panel.ViewPanelWdg'>
    <search_type>sthpw/task</search_type>
    <view>task_summary</view>
  </display>
</element>

Custom Layout

Description

The Custom Layout Widget is a simple tool which opens up an incredible amount of customizable interface flexibility and integration from within the TACTIC UI. This widget provides a container in the web page which supports embedding of HTML code including TACTIC Widgets, Expressions and Behaviours. This allows development of complex widgets similar to the standard widgets delivered with TACTIC.

With this, the following examples can be achieved:

  • Custom reports can be made which include dynamic TACTIC Expressions presented in a customized web page design.

  • Views can be assembled using a combination of TACTIC widgets along with regular HTML elements.

  • Embeddable web code such as Google maps, timezone clocks, web mail clients etc. can be embedded in the TACTIC interface.

Info

Name

CustomLayoutWdg

Class

tactic.ui.panel.CustomLayoutWdg

TACTIC Version Support

2.5.0 +

Required database columns

none
Implementation

The Custom Layout Widget in its simplest form is a delivery mechanism for HTML code. The following "Hello World" example below demonstrates this.

<element name="hello_world">
  <display class="tactic.ui.panel.CustomLayoutWdg">
    <html>
       <h2>Hello World</h2>
    </html>
  </display>
</element>

Where a large part of the considerations for usage of a Custom Layout is where it will be embedded and how it will get retrieved. There are a few ways to implement this widget:

  • In a cell (element) in a TableLayoutWdg (Example 1a).

  • In the widget config, then called from a link in the sidebar (Example 1b).

  • In the widget config, than called from a Custom Script (Javascript) (Example 1c).

Once a delivery method has been decided, it also needs to be decided if the custom Layout will need to evaluate based on an item being passed in as the parent or 'starting point' (technically speaking a 'relative' expression). For example, to use a CustomLayout to display a report for a item, the dynamic data in the CustomLayout needs to be derived starting from the specified item.

Taking advantage of relative expressions is usually accessed/assumed through the search_key value for the widget. This is most often done through TACTIC Expressions embedded in the HTML code or, through JavaScript code interacting with the CustomLayout. Either way, the search_key value must me passed into the widget for relative behavior. A simple example is that a button in a table can pass in the search key based on the item (row) it was clicked for. This would allow for loading of a custom dashboard which shows all information pertaining to that item.

Embedded Expressions

Expressions can be embedded in the Custom Layout through usage of a [expr] style tag. This Tag allows for embedding of expressions that are evaluated before the HTML which provide the resulting values into the HTML code.

The following example displays the task status of the modelling process.

<element name="hello_world">
 <display class="tactic.ui.panel.CustomLayoutWdg">
  <html>
   <div>
     Model Status: [expr]@GET(sthpw/task['process', 'model'].status)[/expr]
   </div>
  </html>
 </display>
</element>

Embedded Widgets

The CustomLayoutWdg provides full support for embedding of TACTIC Widgets. For example TableLayoutWdg and EditWdg can placed in a CustomLayout. This for allows, for example, the ability to create a 'dashboard' which can show multiple Tables, CustomLayouts HTML, etc.

<element name="hello_widget">
  <display class="tactic.ui.table.CustomLayoutwdg">
    <html>
      <element name="tasks">
        <display class="TableLayoutWdg">
          <search_type>sthpw/task</search_type>
          <view>task_list</view>
          <mode>simple</mode>
          <do_search>true</do_search>
          <search_key>{@GET(state.search_key)}</search_key>
        </display>
      </element>
    </html>
  </display>
</element>

Note

In the example above, the <search_key> option is automatically being passed the search_key from the state of the overall Custom Layout. What this will do is pass in the searhc key to the table which will automatically filter it to only show items related to the search_key (parent). For example in a dashboard for a shot, the tasks table will only display tasks related to the shot as opposed to all tasks in the system.

Embedded Behaviours

The Custom Layout also supports usage of the TACTIC JavaScript Behaviour system. With this, elements in the Custom Layout can contain embedded behaviours which allow for creation of custom interfaces and utilities. This opens up full a connection with the interface, clientAPI and Java Applet.

<?xml version='1.0' encoding='UTF-8'?>
<config>
  <hello_world>
    <html>
      <span>This is a button:</span>
      <input type='button' class='spt_button1' value='Press Me'/>
    </html>
    <behavior class='spt_button1'>{
     "type": "click_up",
     "cbjs_action": '''
         alert('Hello World');
     '''
    }</behavior>
  </hello_world>
</config>

Options

view

The view to retrieve from the Widget Config. This is not required if the HTML option is supplied.

html

This option is where the HTML code is embedded.

search_type

The Search Type the CustomLayoutWdg applies to (if applicable)
Examples
Example 1a

This can be stored in the definition view and called as an element by name (<element name="hello_world"/>) or, directly in the view config.

If added to the definition, it will be available as a Widget Column in the Column Manager.

<config>
  <definition>
    <element name="preview"/>
    <element name="code"/>

    <element name="hello_world">
      <display class="tactic.ui.panel.CustomLayoutWdg">
        <html>
           <h2>Hello World</h2>
        </html>
      </display>
    </element>

  </definition>
</config>
Example 1b

The following example shows how to create a sidebar link which loads a Custom Layout view defined in the Widget Config.

  1. In the Widget Config enter the following hello_world view. This can be called from The Javascript code and sent to a popup.

  2. The link can be configured in the Project Views Manager. Under the action menu, select "New Link". In the pop-up, Fill the options as shown in the following image.

  3. Once the link is saved, select it in the Preview of Side Bar to load its options into the Element Detail panel on the right. Once loaded switch the mode to 'Advanced' and double check that the XML config contains the following:

    <element name="hello_world" title="Hello World" icon="APPROVED" state="" is_visible="on">
      <display class="LinkWdg">
        <class_name>tactic.ui.panel.CustomLayoutWdg</class_name>
        <view>example01</view>
      </display>
    </element>
Example 1c

The following example shows how to create a CustomLayoutWdg View in the widget config then, call it from the Javascript Editor

  1. In the Widget Config enter the following hello_world view. This can be called from The Javascript code and sent to a pop-up.

  2. In the Javascript Editor create the following custom script example to load the view into a pop-up.

    kwargs = {
     view: 'hello_world',
    };
    
    spt.panel.load_popup('Custom Layout Popup', \
        'tactic.ui.panel.CustomLayoutWdg', kwargs); 

Table Layout

Description

The TableLayoutWdg is the primary widget used to layout tabular data. It is primarily driven by the widget configuration. The TableLayoutWdg has the ability to display complex widgets inside each cell, to inline edit the data and to color code cells. It is the widget that is most often used to display information within the TACTIC.

Info

Name

Table Layout

Class

tactic.ui.panel.TableLayoutWdg

TACTIC Version Support

2.5.0 +

Required database columns

none
Implementation

The TableLayoutWdg makes use of "views" which are defined in the widget config for each project. When the Table is loaded as part of an interface, a view configuration is passed into it which defines which columns and widgets should be displayed in the view. Typically, these view configurations are automatically saved in the background when a user saves a view from within the TACTIC interface. The table itself provides the ability to add, remove, rearrange, resize and group columns which can then be saved out often as links in the sidebar.

The following shows a simplified version for an "asset tracking" view as saved in the background widget config.

<config>
  <asset_tracking layout="TableLayoutWdg" >
    <element name="preview" width="74px"/>
    <element name="asset_category_code" width="64px"/>
    <element name="code" width="61px"/>
    <element name="title" width="121.883px"/>
    <element name="description" width="276.75px"/>
    <element name="keywords" width="253.367px"/>
    <element name="general_checkin" width="27px"/>
    <element name="history" width="42px"/>
    <element name="task_edit" width="29px"/>
    <element name="task_status_edit" width="223.167px"/>
  </asset_tracking>
</config>

The widget configuration is an XML document. In this example, it defines an "asset_tracking" view with elements (preview, asset_category, code, title, description, keywords, etc...).

To draw what to display, TableLayoutWdg looks at the list of elements defined in the widget config and draws a column for each element. TACTIC then draws a row for each item that was either retrieved from a search, an expression or by supplied items. Each cell in the table represents an item being drawn by the defined element for a given column.

While the top widget configuration defines the list of elements to draw the columns, the exact definition of each element do not necessarily appear here. There are a number of views which define an element. Some of these elements may be defined inline or they may be defined elsewhere. There is a set hierarchy which the TableLayoutWdg looks for to find the definition of a particular element.

The hierarchy which TableLayoutWdg looks to find the definition for an element is as follows:

  1. the given type, view combination in the widget_config table

  2. the "definition" view for the given type in the widget_config table

  3. the predefined views for a given type (modules shipped with TACTIC will have predefined views for may of the items to ensure proper functioning of TACTIC even if there are no entries in the widget_config database)

  4. the "default_definition" for a given type as defined in the predefined views.

The third and fourth locations only apply to predefined types that are shipped with TACTIC. All custom types will only use the first two.

Options

search_type

Defines the type that this table will be displaying. It is used both for finding the appropriate widget config and for handling search (if necessary). Defaults to "table".

view

Defines the view that this table will displaying. It used to find the appropriate widget config to display the table.

do_search

By default, the TableLayoutWdg will handle the search itself. However, certain widgets may wish to turn this functionality off because they are supplying the search (internally used by ViewPanelWdg)

order_by

Add an explicit order by in the search

expression

Use an expression to drive the search. The expression must return items.

parent_key

Set a specific parent for the search

width

Define an initial overall width for the table

show_row_select

Flag to determine whether or not to show row_selection

show_gear

Flag to determine whether or not to show the gear menu.

show_insert

Flag to determine whether or not to show the insert button.

insert_mode

aux|inline|pop-up|none - set the insert mode of the table
search_limit An overriding search limit. A value < 0 means no limit affecting the search
config_xml Explicitly define the widget config
element_names Explicitly set the element names to be drawn
Advanced

Very often, the TableLayoutWdg is not used directly, but is used through the ViewPanelWdg, which combines the TableLayoutWdg with the SearchWdg. Using ViewPanelWdg will provide all the functionality in a table view

Using the TableLayoutWdg does provide a simpler view if the search is already known,

This simple example shows the login table and the objects are explicitly given.

from tactic.ui.panel import TableLayoutWdg
div = DivWdg()
table = TableLayoutWdg(search_type='sthpw/login', view='table')
sObjects = Search("sthpw/login").get_sObject()
table.set_sObjects(sObjects)
div.add(table)

An expression can be set for the search as well.

from tactic.ui.panel import TableLayoutWdg
div = DivWdg()
expression = "@SOBJECT(sthpw/login)"
table = TableLayoutWdg(search_type='sthpw/login', view='table',expression=expression)
div.add(table)

This example embeds the login table with a "table" view in a CustomLayoutWdg.

<config>
<login>
  <html>
    <h1>This is the login table</h1>
    <element name='login_table'/>
  </html>
  <element name='login_table'>
    <display class='tactic.ui.panel.TableLayoutWdg'>
      <search_type>sthpw/login</search_type>
      <view>table</view>
      <expression>@SOBJECT(sthpw/login)</expression>
    </display>
  </element>
</login>
</config>

The widget config views determine how the TableLayoutWdg draws itself. There are a few custom attributes that a view can define. The view can define many parts of how the TableLayoutWdg is displayed. The following hides the "insert" button and makes each of the cells non-editable. These attributes are useful for reports which are generally not editable.

<?xml version="1.0" encoding="UTF-8"?>
<config>
  <simple insert='false' edit='false'>
    <element name="preview"/>
    <element name="code"/>
    <element name="name"/>
    <element name="description"/>
  </simple>
</config>