Parent | Child | Previous | Next
 

Layout Properties

Description

Configures the look and feel of the List layout, including defining the layout type and optional CSS class overrides.

Layout type

Defines the type of layout for the List control. The Layout type can be a Column, Freeform, or Kanban layout as described below:

Type
Description
Column

The layout is divided into multiple columns.

Freeform

A Freeform layout is a completely customized layout defined using HTML and Client-side template syntax. A Freeform layout supports 'snaking' layouts.

Kanban

A special List type to display a 'Kanban' style List. A Kanban list allows you to drag and drop list rows into various categories.

Custom

A completely custom layout defined using a JavaScript function that computes the HTML layout for the List control.

Map

A map layout displays the List data as markers on a map.

Show column titles

If enabled, column titles will be shown for each field in the layout. Only applies to a list with a 'Column' Layout type.

Has column actions

Enables the ability to add a Column Action to a column in the List. Column Actions let you apply filters to the List. Column actions are configured for individual controls in the [List Layout].

See List Column Actions for more information.

Column action settings

Settings for configuring the position and tooltip shown for Column Actions:

Setting
Description
Icon position

The position of the Column Action icon relative to the column label.

Equals

The help text shown when the user hovers the mouse over the Equals action

Not equals

The help text shown when the user hovers the mouse over the Not equals action

Contains

The help text shown when the user hovers the mouse over the Contains action

Does not contain

The help text shown when the user hovers the mouse over the Does not contain action

See List Column Actions for more information.

Freeform type

Specify how the data in the list is laid out. Choices include Vertical, Horizontal, Snaking. Only applies to a list with a 'Freeform' Layout type.

Item width

The Item width defines the width for each 'data row'. You can specify an explicit dimension for the item width (e.g. 300px, 1in, etc.), or you use the keyword fill, followed by an optional modifier.

If the fill keyword is used, the List item will fill the entire width of the List.

The modifier is used to indicate that the List item should not quite fill the entire width of the List. You specify an explicit value (e.g. 40px, .5in) by which the List item is less than the List width.

For example, if you set the width to fill-10px, the List item will be 10px less than the width of the List.

If you leave Item width blank, each List item (i.e. 'row' of data) is automatically sized based on the row's contents.

Item height

Specify the height of each item. If you leave this blank, each item (i.e. 'row' of data) is automatically sized based on the contents of the row being rendered. You can also use the fill keyword. See the Item width property above for more information about the fill keyword.

List item class name

Specify one or more classes to apply to each 'item' (e.g. row of data) in the List. If no class name is specified, the default class in the UX Component's style is used.

List item hover class name

Specify one or more classes to apply when the mouse hovers over an 'item' (e.g. row of data) in the List. If no class name is specified, the default class in the UX Component's style is used.

To prevent row highlighting when an item is "hovered", specify a class name that does not exist.

List item selected class name

Specify an optional class to apply when an 'item' (e.g. row of data) is selected. If no class name is specified, the default class in the UX Component's style is used.

List item in-line style

List item in-line style property.

Group Break class name

Specify an optional class to apply to Group Headers. (Only applies if List has Group Breaks.)

Has list item footer

Specify if each item (row) in the list has a free-form footer section

List item footer

Specify the HTML for the footer that appears under each List Item (i.e. each row in the list).

You can use the <listObject>.rowExpander() method to toggle the open state of the List item footer, or to explicitly open or close it.

List item footer initial state

Specify the initial state of the List Item footer. Choices include Open, Closed.

Content class name

CSS Class for container of all List items.

Videos - Kanban Layouts

Introduction to Kanban List Layouts

Kanban Lists display data organized by category. Users can move List rows from one category to another using drag and drop. Users can also re-order the data within a category using drag and drop.

In this video we show a List control with both a columnar and a Kanban layout.

Download Component

2018-10-03

Creating a List with a Kanban Layout

In this video we show how a Kanban layout can be defined for a List.

Download Component

2018-10-03

Kanban settings

The Kanban settings are used to configure a 'Kanban' layout.

To learn more about Kanban layouts, check out the Kanban Videos Below.

The available settings are listed below:

  • Category field

    The field in the List data that contains the various categories.

  • Category display

    The categories in the Kanban layout can either be displayed horizontally (as in the above image), or vertically. On a phone, for example, it is likely that you would want a vertical display. Choices include Horizontal and Vertical.

  • Order field

    The field in the List data that defines the order of the records within a category.

  • Default category names

    The List of category names that the Kanban layout should display regardless of whether there is any data in the category or not. For example, in a sales pipeline list you may want to include a Closed category even if no current records have a status of Closed.

    The categories in the Kanban layout are displayed in the same order in which they appear in this property. For example, if the default categories are Prospect, Qualified, Proposal, Closed and Lost, this is the order in which the Kanban layout will display the categories.

    If there are no records in a particular category, you can control the HTML that is displayed in the empty category by setting the HTML for empty categories property.

  • Sort fields

    The data in the List are automatically sorted by the category field and within category by the order field. You can define additional sort criteria. For example, if two records in the same category have the same value in the order field, the sort defined here will break the tie.

  • Category header html

    The HTML that appears at the top of each Category group

  • Category class name

    Specify the class name for the category header.

  • Move icon

    The icon that is displayed in each row. The user drags on this icon to move a row to a new position or a different category.

  • Color Javascript

    This is optional. You can define a JavaScript function that can return a color to use in the Kanban layout. Your JavaScript code can determine what color to return based on data in the current row which is available in the data variable. The data variable contains the field values for the current row in the List. For example:

    if(data.Category == 'Qualified') return 'Pink';
if(data.Category == 'Prospect') return 'Orange';
if(data.Category == 'Proposal') return 'Blue';
if(data.Category == 'Closed') return 'Green';
if(data.Category == 'Lost') return 'Red';

  • The JavaScript above returns a unique color for five categories.:

    Category
    Color
    Qualified

    Pink

    Prospect

    Orange

    Proposal

    Blue

    Closed

    Green

    Lost

    Red

  • onMove function

    This function is called when a row is moved (either to a new position within a category, or from one category to another). Your JavaScript code can reference the following variables:

    Variable
    Description
    mode

    Either 'item' or 'category'. Will be 'category' if moving a row to an empty category, otherwise will be 'item'.

    from

    Zero based row number of the position of the row in the List data before it is moved.

    to

    If mode is 'item', zero based position of row in the List after it has been moved. If mode is 'category', name of the category to which the List row was moved.

    fCat

    The category the item is moving from.

    tCat

    The category the item is moving to.

    after

    true or false. Will be true if row is moved after the last row in a category.

    You can also reference the this object, which is a pointer to the List object.

    Example: Making an Ajax Callback when a row is moved
    var obj = {};
obj.fromCategory = fCat;
obj.toCategory = tCat;
obj.data = data;
var msg = JSON.stringify(obj);
var _d = A5.ajax.buildURLParam('_jsondata',msg);
var nameOfXbasicFunction = 'xb1' //replace with your own function name.
{dialog.object}.ajaxCallback('','',nameOfXbasicFunction,'',_d)

  • onBeforeMove function

    This function is called when the user moves an item to a new category. If the event returns false, the move is cancelled.

    Your JavaScript code can reference the following variables:

    Variable
    Description
    mode

    Either 'item' or 'category'. Will be 'category' if moving a row to an empty category, otherwise will be 'item'.

    from

    Zero based row number of the position of the row in the List data before it is moved.

    to

    If mode is 'item', zero based position of row in the List after it has been moved. If mode is 'category', name of the category to which the List row was moved.

    after

    true or false. Will be true if row is moved after the last row in a category.

    data

    The data for the row that the user wants to move.

    You can also reference the this object, which is a pointer to the List object.

  • Has category footer

    Should a footer be displayed at the bottom of each category column?

  • Category footer HTML expression

    Specify the expression that returns the HTML for the category footer.

  • Category footer class name

    Specify the class name for the category footer.

  • Group class name

    Specify the class name for the entire category.

    If you set to 'KanbanColumn' or a blank value Alpha Anywhere will generate the appropriate CSS definition.

  • HTML for empty categories

    Specify the Javascript to compute the HTML to display in empty categories.

  • Classname for empty categories

    Specify the class name for empty categories.

Custom layout settings

A custom layout gives you complete control over how the records in the List control are rendered. The HTML to display is computed using a JavaScript function. This function is defined in the onDraw property in the Custom layout settings. The function will be passed all of the data in the List control.

  • onDraw

    The onDraw property defines the HTML to render using JavaScript. The HTML is set by assigning it to the innerHTML property of the ele variable, which is passed to the function. The variables that can be referenced in the JavaScript function are:

    Variable
    Description
    type

    The onDraw "type". It can be one of the following:

    Type
    Description
    "initial"

    The List is rendering for the first time.

    "refresh"

    The List is being refreshed.

    "resize"

    The List is being resized.

    data

    All of the data in the List. data is an array of objects.

    ele

    The element for the List body. Your code must set the innerHTML of this element. If you do not set the ele.innerHTML property, the List's HTML will not be updated.

    The example below demonstrates how to use these variables to compute the HTML for the List:

    if (type == 'initial') { 
    //initial render
    ele.innerHTML = 'custom layout for ' + data.length + ' rows of data';
} else if (type == 'refresh') { 
    ele.innerHTML = 'custom layout for ' + data.length + ' rows of data';
} else if (type == 'resize') { 
    //do nothing
}

Map layout settings

A map layout displays the records in the List as markers on a map. Each row of of data is represented by its own marker. The Map layout settings define the properties and events for the map markers. Most properties are defined using JavaScript.

  • Map Layout Settings

    The Map Layout Settings are used to configure the map marker for each row of data in the List control. At a minimum, you must define the Latitude/longitude or address property.

    All Map Layout Settings properties have access to the following variables:

    Variable
    Description
    data

    The data for a row in the List control. data contains the fields in the List row. A comment is dynamically generated that lists the available fields. For example, if the List control is based on a data source with a "CustomerName", "Address", "City", and "State" column, the following generated comment will be included in the editor for the property:

    // The 'data' object has these properties: CustomerName,Address,City,State

    Property names are case-sensitive. To reference a property in the data object, such as "City" or "State", you would write:

    var cityState = data.City + ", " + data.State;
    rowNumber

    The corresponding row number for the data in the List control.

    • Latitude/longitude or address

      JavaScript that computes the location of the map marker. Your code must return either an array with the latitude and longitude values or a string with an address.

      //return a latitude/longitude value
return [data.latitude,data.longitude];

//return an address as a string
return data.address;

      Defining the latitude/longitude or address is required.

      If you return the address, the address will be geocoded using Google's Geocoding Service which limits the number of API calls permitted (unless you have upgraded to the premium plan). Geocoding will be performed every time a marker is placed on the map. This can lead to undesired behavior -- such as missing markers due to exceeding the API call limits.

      If your data does not have the latitude/longitude, you can follow this guide to learn how to bulk geocode your data in your data source.

      If geocoding the data in advance is not an option, it is highly recommended to paginate the List data to limit the number of map markers shown.

    • Marker icon

      The Marker icon is the icon shown on the map for the List data. The icon used can be specified using an expression, a JavaScript function, or an image sequence. Icons can be a built-in image or an image from the project.

      The data and rowNumber variables can be used in Condition expressions and Javascript function methods for defining the marker icon. Both methods for defining the marker can reference the data and rowNumber variables described above.

      If using an image sequence, the marker will be automatically computed based on the data's row number in the List control. You can select from a set of pre-defined image sequences. Image sequences use specially labelled images that contain either numbers (1 - 100) or letters (A - Z) to give each marker on the map a unique icon. If there are more rows of data in the List than available images, a generic image with no number/letter will be used.

      If no Marker icon is defined, Alpha Anywhere will use an image sequence to display the map markers for the List data.

      You can download free icons from the Map Icons Collection at https://mapicons.mapsmarker.com/. Add the icons to your project prior to referencing them.

    • Marker is draggable

      JavaScript that computes whether or not the Marker is draggable - the user can click/tap hold and drag the marker on the map. Your code must return either true or false to indicate if the marker can be dragged.

      return true;

      If this property is not defined or the property returns false, dragging will be disabled.

    • Marker title

      JavaScript to compute an optional marker title. If you do not want a marker title, return false. Otherwise, your code must return the title text.

      return 'Title is ' + data.name;

' Marker has no title:
return false;

      If this property is not defined or returns false, the marker will have no title.

    • Marker has detail view

      JavaScript that indicates whether or not the marker has a detail view. Your must return either true or false to indicate if the marker has a Detail View.

      return true;

      If this property is not defined or returns false, the marker will have no detail view.

    • Detail view HTML

      If the marker has a detail view, the Detail view HTML property computes the HTML to display to the user when the detail view is shown. Your code must return the HTML to display in the Detail View which is shown when the user clicks on the marker.

      You can reference the following variables in your JavaScript

      return 'The detail view is: ' + data.name;

      If this property is required if the Marker has detail view property returns true.

    • Marker animation

      Defines whether or not a marker should be animated when placed on the map. If no animation is desired, your code should return false. Otherwise, you can return 'drop' or 'bounce' for the animation type.

      return 'drop';

      If this property is not defined or returns false, the marker will have no animation.

    • Marker animation bounce duration

      If a marker is animated when placed on the map, the Marker animation bounce duration JavaScript must return the bounce duration in milliseconds.

      return 5000;

      If this property is not defined, the marker will use the default animation.

    • Marker has overlay

      The Marker has overlay property computes whether or not an overlay is shown surrounding the marker. Your code can return true if an overlay should be shown or false if no overlay is desired.

      return true;

      If this property is not defined or returns false, the marker will have no overlay.

    • Marker overlay size

      If the marker has an overlay, the Marker overlay size defines either the overlay's radius or area. The overlay size is defined as a number followed by a unit. Radius values use the units "m", "km", "mi", or "ft". Area values use the units "sq m", "sq km", "sq mi", or "sq ft". For example:

      return "10sq km";

      If this property is not defined, the marker overlay will have a size of zero.

      There must be no whitespace between the number and unit defining the overlay size.

    • Marker overlay fill color

      If the marker has an overlay, the Marker overlay fill color defines the fill color for the overlay. The fill color is defined as a CSS value. Use the Insert color link in the Marker Overlay Color editor to insert a color using the Color Picker.

      return "hsl(193.64,43.14%,20%)";

      If this property is not defined, the marker will use the default fill color.

    • Marker overlay fill opacity

      The Marker overlay fill opacity defines the transparency for the marker overlay fill color. You must return a value between 0 and 1. A value of 0 indicates that the fill color is completely transparent while a value of 1 indicates that the fill color is completely opaque.

      // Overlay fill is 80% opaque (i.e. 20% transparent):
return 0.8;

      If this property is not defined, the marker will use the default opacity.

    • Marker overlay stroke color

      If the marker has an overlay, the Marker overlay stroke color defines the stroke color for the overlay. The stroke can be used to add a border to the marker overlay. The stroke color is defined as a CSS value. Use the Insert color link in the Marker Overlay Stroke Color editor to insert a color using the Color Picker.

      return '#f4461a';

      If none of the stroke properties are defined, the marker overlay will not have a border.

      If any of the other stroke properties are defined and this property is not defined, the marker overlay border will use the default stroke color.

    • Marker overlay stroke width

      The Marker overlay stroke width defines the width (in points) of the border surrounding the overlay.

      // Overlay "border" 10 pts wide:
return 10;

      If none of the stroke properties are defined, the marker overlay will not have a border. Otherwise, if this property is not defined, the marker overlay border will use the default stroke width.

    • Marker overlay stroke opacity

      The Marker overlay stroke opacity defines the transparency for the marker overlay stroke color. The stroke can be used to add a border to the marker overlay. You must return a value between 0 and 1. A value of 0 indicates that the stroke color is completely transparent while a value of 1 indicates that the stroke color is completely opaque.

      // Overlay "border" is 50% opaque (i.e. 50% transparent):
return 0.5;

      If none of the stroke properties are defined, the marker overlay will not have a border. Otherwise, if this property is not defined, the marker overlay border will use the default stroke opacity.

    • Marker name

      The Marker name defines the name of the marker for each row of data in the List. Each marker must have a unique name. You can reference data in the record and the List row number to create your marker name. For example:

      return 'marker' + rowNumber;

      If this property is not defined, the marker will use the default marker name.

    • Group name

      The Group name is a name given to a group of markers. The group name can be a static value or dynamically computed based on the data for the List row. For example:

      // All markers are in the "Customer" group:
return "Customer";

// Markers are grouped based on their Country:
return data.Country;

      If this property is not defined, the marker will use the default group name.

  • Javascript

    Javascript events are available for adding additional functionality to the List map, such as opening a detail view or updating the latitude/longitude of a record when the user drags a map marker.

    The JavaScript defined in these events can reference the below variables described below:

    Variable
    Description
    data

    The data for a row in the List control. See Map layout settings above for more information.

    rowNumber

    The corresponding row number for the data in the List control.

    arguments[0]

    The marker object. This object contains methods for accessing the marker's latitude and longitude, which can be accessed via the latlng property. For example:

    var lat = arguments[0].latLng.lat();
var lng = arguments[0].latLng.lng();

    • onClick

      The onClick event is triggered when the user clicks or taps a map marker. This event could be used to perform an action, such as navigate to a panel that displays detailed information about the map marker.

      For example:

      {dialog.object}.setValue('LIST1',data.CustomerID);
{dialog.object}.panelSetActive('PANELCARD_2');

    • onDblClick

      The onDblClick event is triggered when the user double-clicks or double-taps the map marker. You can add custom code to this event to perform an action when the marker has been double-clicked.

    • onDrag

      The onDrag event is triggered when the map marker has been dragged. You can add custom code to this event to perform an action when the marker has been dragged.

    • onDragEnd

      The onDragEnd event is triggered when the user release the map marker. YOu can add custom code to this event to perform an action, such as update the latitude and longitude of the map marker in the List.

      For example:

      var lat = arguments[0].latLng.lat()
var lng = arguments[0].latLng.lng()
var d = {latitude: lat, longitude: lng};
var lObj = {dialog.object}.getControl('{dialog.listId}');
try{
    lObj.updateTableRow(rowNumber,d);
    {dialog.Object}.refreshClientSideComputations();
}catch(e) { 
    {dialog.Object}.refreshClientSideComputations();
}

    • onDragStart

      The onDragStart event is triggered when the user release the map marker. You can add custom code to this event to perform an action.

    • onMouseDown

      The onMouseDown event is triggered when the user depresses the left mouse button. You can add custom code to this event to perform an action.

    • onMouseOut

      The onMouseOut event is triggered when the mouse cursor moves off of the map. You can add custom code to this event to perform an action.

    • onMouseOver

      The onMouseOver event is triggered when the user moves the mouse cursor over the map. You can add custom code to this event to perform an action.

    • onMouseUp

      The onMouseUp event is triggered when the user releases the mouse button. You can add custom code to this event to perform an action.

    • onRightClick

      The onRightClick event is triggered when the user clicks the right mouse button. You can add custom code to this event to perform an action.

    • onAddComplete

      The onAddComplete event is triggered after a marker has been added to the map. It fires for each marker added to the map. You can add custom code to this event to perform an action.

Videos

Adding Color Coding and Summary Values to a Kanban Layout

In this video we show some advanced features of a Kanban layout. We show how you can add color coding to the layout (so that List rows in different categories are colored differently and how you can summary data to each category.

Download Component

2018-10-03

Persisting Edit in a Kanban List to a SQL Database

In this video we show how a Kanban List can be based on a SQL database and how edits to the List can be saved in the database.

Download Component

2018-10-03

List Control Map Layout

A List control can have multiple Layouts. The most common Layouts are columnar and freeform. But a List can also have a Kanban layout and a Map layout.

The Map layout displays a Map control in the List and shows markers on the map for each row of data in the List.

In this video we show how the Map layout is configured.

Download Component

2019-03-24

Column Actions

When you turn on Column Actions for a columnar Layout in a List control, an filter icon is shown in the column header for each column in the List. The column actions provide a very powerful and convenient way for filtering the data in a List.

2020-07-17

See Also