Skip to main content

buildfire.components.actionItems

This component simplifies the development of the management controls when adding Action Items. Used on the Control side of a plugin, it allows the app owner to add, edit, delete and sort action items.

This name space consists of one major class:

  • sortableList which is the class that instantiates the editor component typically used on the control side to add, edit and delete action items.

Requirements​

Control​

<head>
  <!-- Load helper.css to use our helper classes -->
  <link href="../../../../styles/helper.css" rel="stylesheet" />
  <link href="../../../../styles/siteIcons.css" rel="stylesheet" />

  <!-- JS -->
  <script src="../../../../scripts/buildfire.js"></script>
  <script src="../../../../scripts/sortable.min.js"></script>
  <script src="../../../../scripts/buildfire/components/actionItems/sortableList.js"></script>
</head>

sortableList​

Class instance for Sortable List. Typically used on the control side to add, edit and delete action items and handle

Editor

In your controller body create an html container element for sortable list

<body>
  <div class="sortable-list"></div>
</body>

Methods​

sortableList()
​

let sortableList = new buildfire.components.actionItems.sortableList(selector, items);

Sortable list class constructor method.

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list",
  []
);

For full example see https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleActionItems/control/content/index.html

Arguments​

NameTypeRequiredDescriptionDefault
selectorstringyesCss selector of element that will contain the sortable list
items[object]noOptional array of items to be preloaded into sortable list. For possilble objects see Action Items

sortableList.init()
​

sortableList.init()

Initializes the sortable list component.

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.init();

sortableList.loadItems()
​

sortableList.loadItems(items, appendItems)

Loads new items into the list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.loadItems([
  {
    title: "build fire",
    url: "https://www.facebook.com/buildfireapps",
    action: "linkToWeb",
    openIn: "_blank",
  },
]);

Arguments​

NameTypeRequiredDescriptionDefault
items[object]yesArray of items to be loaded into sortable list. For possilble objects see Action Items
appendItemsbooleannoIf true it will append items to list, otherwise it will replace the listfalse

sortableList.append()
​

sortableList.append(items)

Appends an item or many items to the list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.append([
  {
    title: "build fire",
    url: "https://www.facebook.com/buildfireapps",
    action: "linkToWeb",
    openIn: "_blank",
  },
]);

Arguments​

NameTypeRequiredDescriptionDefault
items[object] | objectyesArray of items, or sigle item to be appended to sortable list. For possilble objects see Action Items

sortableList.clear()
​

sortableList.clear()

Clears the sortable list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.clear();

Handlers​

Handlers are overridable functions that serve as event listener when items are added, edited removed or reordered.

tip

You can use handler methods to persist data to datastore

sortableList.onItemChange()
​

sortableList.onItemChange(item, index)

Will be triggered when item in list is edited

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onItemChange = (item, index) => {
  console.log(`Item on index ${index} changed`, item);
};

Arguments​

NameTypeDescription
itemobjectAction item object. See Action Items
indexnumberAction item index in list

sortableList.onOrderChange()
​

sortableList.onOrderChange(item, oldIndex, newIndex)

Will be triggered when item in list is reordered

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onOrderChange = (item, oldIndex, newIndex) => {
  console.log("Item", item, `reordered from ${oldIndex} to ${newIndex}`);
};

Arguments​

NameTypeDescription
itemobjectAction item object. See Action Items
oldIndexnumberOld action item index in list
newIndexnumberNew action item index in list

sortableList.onAddItems()
​

sortableList.onAddItems(items)

Will be triggered when new item is added to list, item index will be items.length

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onAddItems = (items) => {
  console.log("New item added. Items are", items);
};

Arguments​

NameTypeDescription
itemsobjectArray of action item objects. See Action Items

sortableList.onDeleteItem()
​

sortableList.onDeleteItem(item, index)

Will be triggered when item is deleted from the list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onDeleteItem = (item, index) => {
  console.log(
    `Item was delted from the list on index ${index}. Item was`,
    item
  );
};

Arguments​

NameTypeDescription
itemobjectArray of action item objects. See Action Items
indexnumberIndex of delted item