actionablelist

A list of items with an action button in addition to titles and subtitles.

  • Extends xlist

    • Syntax 

    <div data-juci="actionablelist" data-title="shipmentName" data-action="shipmentNumber" data-bind="ref: deliveries" onlistitemclick="$m.toast('U clicked - '+ event.index);"></div>
    juci.addDataset("deliveries", [
	{
		"shipmentName": "Future Logistics",
		"shipmentNumber": "533726",
	},
	{
		"shipmentName": "MKM Transports",
		"shipmentNumber": "498723"
	}]
);

    Attributes

    • data-action {String}
      Name of reference or an expression with the reference, defined using juci#addDataset. Appears as an action button in each item.
    • data-action-css {String}
      CSS class for the action. See css expression binding
    • data-juci {String}
      A string with value actionablelist.

    Methods

    • onActionClick(handler, context)
      Registers a handler function to call when the actionablelist#event:actionclick event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      See:
      actionclick

    Events

    • actionclick(eventObj)
      Fires when user taps on the action in an actionablelist item.
      Parameters:
      • eventObj{EventObject}
        • data{Object}
          Data for the item.
        • listItem{juci.elem}
          The element for the item.
        • index{Number}
          Index of the item.
        • wrappedData{Object}
          The mapped data for the item.
    • statclick(eventObj)
      Fires when user taps on the action in an statlist item.
      Parameters:
      • eventObj{EventObject}
        • data{Object}
          Data for the item.
        • listItem{juci.elem}
          The element for the item.
        • index{Number}
          Index of the item.
        • wrappedData{Object}
          The mapped data for the item.