xlist

The xlist control creates a list of items based on the dataset supplied. Each item in the list can be further expanded to a child view using data-juci="listcontent". The default behavior on clicking a list item is opening it in the content view, if defined.

  • Extends basecontrol

    • Syntax 

    <div data-juci="xlist" id="shippings" data-bind="ref: deliveries"data-flag="'Due'" data-flag-css="'juci_red'">
	<div data-juci="listitem">
		<div class="juci_title" data-bind="display: shipmentName"></div>
		<div class="juci_subtitle" data-bind="display: 'Shipment Number ' + shipmentNumber()"></div>
	</div>
	<div data-juci="listcontent">
		<div data-juci="display" data-bind="ref:$data.shipmentName" data-label="Shipment Name"></div>
		<div data-juci="text" data-bind="ref:$data.shipmentNumber" data-label="Shipment Number"></div>
		<div class="juci_vertical_bbar">
			<button data-juci="button" type="submit">Save</button>
			<button data-juci="button" type="reset">Cancel</button>
		</div>
	</div>
</div>
    juci.addDataset("deliveries", [
	{
		"shipmentName": "Future Logistics",
		"shipmentNumber": "533726",
	},
	{
		"shipmentName": "MKM Transports",
		"shipmentNumber": "498723"
	}]
);
    Remarks:
    data-juci="listitem" can be used to create a custom list item template in addition to the data attributes. data-juci="listcontent" can be used to create a custom list content. Further reading link about generic data binding attributes, CSS classes and layouts.
    xlist content is treated as a form, hence submit and cancel button actions close the content page with or without saving.

    Attributes

    • data-empty-item {String}
      Name of function defined on the window scope. Called when xlist#openItem is invoked for the first time. Should return an object with empty values for mapping optional fields in each item.
    • data-delete {String}
      Name of reference or an expression with the reference, defined using juci#addDataset. Shows the delete icon for each item if the return value of the expression is true, else hides.
    • data-subtitle {String}
      Name of reference or an expression with the reference, defined using juci#addDataset. Appears as a subtitle in each list item.
    • data-searcher {String}
      Name of function defined on the window scope. Called when a search string is entered in the options list. The function receives the following params,
      • item {Object}
        An item in the options list.
      • searchString {String}
        The searched string.
    • data-new-item {String}
      Name of function defined on the window scope. Called when xlist#createItem is invoked. Should return a new item with default values filled for the content.
    • data-title {String} 
      data-title="'Mr.' + firstName() + ' ' + lastName() " // Expression
    • data-subtitles {String}
      Comma separated values described in data-subtitle. To add multiple subheaders to the list.
    • data-titles {String}
      Comma separated values described in data-title. To add multiple subheaders to the list.
    • data-juci {String}
      A string with value xlist.
    • data-search-delay {String}
      Number of milliseconds after which search can start processing.
    • data-flag {String}
      Name of reference or an expression with the reference, defined using juci#addDataset. Creates a flag for each item based on with the return value of the expression as the content, if empty hides the flag.
    • data-flag-css {String}
      CSS class for the flag. See css expression binding

    Methods

    • addItem(item, index, doMapping, mapping)
      Adds an item to the list at passed index.
      Parameters:
      • item{Object}
        The item to be added to the dataset.
      • index{Number} Optional , Default: 0
        Index at which the item has to be added.
      • mapping{Object} Optional
        Mapping configuration on each item for custom mapping.
      • doMapping{Boolean} Optional
        If true, maps the passed item on to the view model juci#dataset, else uses the item as passed.
      Fires:
      additems
      afterchange
    • addItems(item, index, doMapping, mapping)
      Adds an array of items to the list at passed index.
      Parameters:
      • item{Array}
        The array of items to be added to the dataset.
      • index{Number} Optional , Default: 0
        Index at which the items have to be added.
      • mapping{Object} Optional
        Mapping configuration for custom mapping.
      • doMapping{Boolean} Optional
        If true, maps the passed items on to the view model juci#dataset, else uses the items as passed.
      Fires:
      additem
      afterchange
    • addListItemClick(handler, context=window, delegateeSelector)
      Adds a custom click/tap receiver on a list item for a particular element in each list item selected using the delegateeSelector, and registers a handler function to call when the custom event fires.
      Parameters:
      • context=window{Object}
        Context in which the handler function should execute.
      • handler{Function}
        A handler function to execute when the event fires.
      • delegateeSelector{String}
        A CSS selector string that matches for the element.
      juci.getControl("feedList").addListItemClick(handler, null, ".comment");
    • createItem(item, bDontMap)
      Creates an item, but does not add it to the list unless, the user performs a submit action in the content form. Similar to a constructor for the item.
      Parameters:
      • item{Object} Optional
        A constructor copy of an item, i.e. plain JS object.
      • bDontMap
      Throws:
      Error when no data-juci="listcontent" for the list.
      The new object is either passed with the method call or data-new-item should be defined for the xlist.
    • getCurrentIndex()
      Returns the index of the current item opened in the list.
      Returns:
      {Number}
    • getCurrentItem(bMapped)
      Returns the current item opened in the list.
      Parameters:
      • bMapped{Boolean} Optional
        If true, returns the item as present in the list without unmapping to a plain Javascript object.
      Returns:
      {Object}
    • getItem(index, bMapped)
      Returns the item at index in the list.
      Parameters:
      • index{Number}
        Index of the item
      • bMapped{Boolean} Optional
        If true, returns the item as present in the list without unmapping to a plain Javascript object.
      Returns:
      {Object}
    • onDeleteClick(handler, context)
      Registers a handler function to call when the xlist#event:deleteclick 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:
      deleteclick
    • onFlagClick(handler, context)
      Registers a handler function to call when the xlist#event:flagclick 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:
      flagclick
    • onListItemclick(handler, context)
      Registers a handler function to call when the xlist#event:listitemclick 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:
      listitemclick
    • removeAll()
      Removes all items in the list.
      Returns:
      {Array} array of removed items.
      Fires:
      removeall
      afterchange
    • removeItemAt(index)
      Removes an item from the list at passed index.
      Parameters:
      • index{Number}
        Index at which the item has to be removed.
      Returns:
      {Object} removed item.
      Fires:
      removeitem
      afterchange
    • removeItemsAt(index, numberOfItems)
      Removes a number of item from the list starting from the passed index.
      Parameters:
      • numberOfItems{Number}
        Number of items to be removed.
      • index{Number}
        Index at which the items have to be removed.
      Returns:
      {Array} array of removed items.
      Fires:
      removeitems
      afterchange
    • removeListItemclick(handler, context=window, delegateeSelector)
      Removes the custom click/tap receiver on a list item for a particular element in each list item selected using the delegateeSelector.
      Parameters:
      • context=window{Object}
        Context in which the handler function should execute.
      • handler{Function}
        The handler function to be removed.
      • delegateeSelector{String}
        {String} A CSS selector string that matches for the element.
      juci.getControl("feedList").removeListItemClick(handler, null, ".comment");

    Events

    • additem(eventObj) Cancellable
      Fires when xlist.addItem is invoked.
      Parameters:
      • eventObj{EventObject}
        • item{Object}
          Data for the item.
        • index{Number}
          Index of the item.
        • mapping{Object}
          The mapping configuration.
        • doMapping{Boolean}
          True if the item will be mapped.
    • additems(eventObj) Cancellable
      Fires when xlist.addItems is invoked.
      Parameters:
      • eventObj{EventObject}
        • index{Number}
          Index.
        • mapping{Object}
          The mapping configuration.
        • items{Array}
          Array of items to be added.
        • doMapping{Boolean}
          True if the item will be mapped.
    • afterrender(eventObj)
      Fires after a list item is rendered.
      Parameters:
      • eventObj{EventObject}
        • index{Number}
          Index of the item.
        • item{Object}
          The item that has been rendered.
        • listItem{juci.elem}
          The element that has been rendered.
    • closeitem(eventObj)
      Fires when the item is closed using list content.
      Parameters:
      • eventObj{EventObject}
        • data{Object}
          The item.
        • index{Number}
          Index of the item.
        • panel{Object}
          The list content panel.
        • isNew{Boolean}
          True if the item is new and not present in the list.
    • deleteclick(eventObj) Cancellable
      Fires when user taps on the delete icon in a list item. Default action deletes the 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.
    • flagclick(eventObj) Cancellable
      Fires when user taps on the flag in a list 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.
    • listitemclick(eventObj) Cancellable
      Fires when user taps on a list item. Default action opens the list item in the content form if defined.
      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}
          {Object} The mapped data for the item.
    • openitem(eventObj)
      Fires when the item is opened using list content.
      Parameters:
      • eventObj{EventObject}
        • data{Object}
          The item.
        • index{Number}
          Index of the item.
        • panel{Object}
          The list content panel.
        • isNew{Boolean}
          True if the item is new and not present in the list.
    • removeall(eventObj) Cancellable
      Fires when xlist.removeAll is invoked.
      Parameters:
      • eventObj{EventObject}
        • items{Array}
          Array of items to be removed.
    • removeitem(eventObj) Cancellable
      Fires when xlist.removeItem is invoked.
      Parameters:
      • eventObj{EventObject}
        • index{Number}
          Index of the item.
        • item{Object}
          Data for the item.
    • removeitems(eventObj) Cancellable
      Fires when xlist.removeItems is invoked.
      Parameters:
      • eventObj{EventObject}
        • index{Number}
          Index of the item.
        • items{Array}
          Array of items to be removed.
    • reset(eventObj)
      Fires when the list content form is reset.
      Parameters:
      • eventObj{EventObject}
        • data{Object}
          The item.
        • index{Number}
          Index of the item.
        • panel{Object}
          The list content panel.
        • isNew{Boolean}
          True if the item is new and not present in the list.
    • submit(eventObj) Cancellable
      Fires when the list content form is submitted.
      Parameters:
      • eventObj{EventObject}
        • oldData{Object}
          Old value of the item.
        • newData{Object}
          New value of the item.
        • index{Number}
          Index of the item.
        • isNew{Boolean}
          True if the item is new and not present in the list.