Fork me on GitHub

Property List

Allows users to view and change properties from JavaScript objects.


Getting Started

First load the seed file if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the Property List module.

AUI().use(
  'aui-property-list',
  function(A) {
    // code goes here
  }
);

Using Property List

Create an HTML element:

<div class="yui-skin-sam" id="myPropertyList"></div>
Note: the YUI Skin Sam class is the default skin for YUI components. It is completely optional, and is used here to give Property List some basic styling for usability.

Next, populate an array with some objects containing name and value pairs, so that Property List has data to display. We'll pass in our properties array to Property List data option. Finally, let's render it, passing our HTML element to the .render() method.

AUI().use(
  'aui-property-list',
  function(A) {
    var properties = [
      {
        name: 'Programmer',
        value: 'Linus Torvalds'
      },
      {
        name: 'Software',
        value: 'Linux, Git'
      }
    ];

    new A.PropertyList(
      {
        data: properties
      }
    ).render('#myPropertyList');
  }
);

Configuring Property List

There are some other optional constructor types that you can pass to your Property List instance.

For example, you can set an object's editor option containing a new CheckboxCellEditor constructor. This option creates a checkbox input inside the object which can be toggled on/off within Property List. In our example, we are using standard boolean naming conventions, but Checkbox can be assigned any name and value.

AUI().use(
  'aui-property-list',
  function(A) {
    var properties = [
      {
        editor: new A.CheckboxCellEditor(
          {
            editable: true,
            options: [ 'True' ]
          }
        ),
        name: 'Boolean',
        value: 'True'
      }
    ];

    new A.PropertyList(
      {
        data: properties
      }
    ).render('#myPropertyList');
  }
);

Other editor constructor types include DateCellEditor, which contains a calendar widget, RadioCellEditor for radio buttons, DropDownCellEditor for drop-down lists, and TextAreaCellEditor for HTML textarea element. Pass the editor editable option for true to allow changing options. You may also set readOnly to true for each object, disabling the ability to change property values.

AUI().use(
  'aui-property-list',
  function(A) {
    var properties = [
      {
        editor: new A.CheckboxCellEditor(
          {
            editable: true,
            options: [ 'True' ]
          }
        ),
        name: 'Boolean',
        value: 'True'
      },
      {
        editor: new A.DateCellEditor(),
        name: 'Date',
        value: new Date().toDateString()
      },
      {
        editor: new A.RadioCellEditor(
          {
            editable: true,
            options: [ 'Yes', 'No' ]
          }
        ),
        name: 'Radio',
        readOnly: true,
        value: 'Yes'
      },
      {
        editor: new A.DropDownCellEditor(
          {
            editable: true,
            options: {
              apple: 'Apple',
              banana: 'Banana',
              cherry: 'Cherry',
              kiwi: 'Kiwi'
            }
          }
        ),
        name: 'Select',
        value: 'Apple'
      },
      {
        editor: new A.TextAreaCellEditor(),
        name: 'Text-box',
        value: 'Write some text, then save!'
      }
    ];

    new A.PropertyList(
      {
        data: properties
      }
    ).render('#myPropertyList');
  }
);
For more information about configuration, check out our API Docs.