The velo function ListGroupItems adds <li> elements to a parent object, like a <ul>
html:
<ul id="suppliers-list" class="list-group-select" velo-listitem-id="supplierid"
velo-listitem-text="SupplierPortalName" velo-listitem-class="class"></ul>
alt: use curly brackets
<ul id="suppliers-list" class="list-group-select" velo-listitem-id="supplierid"
velo-listitem-text="{SupplierPortalName}, {SupplierPortalMainTown}" velo-listitem-class="class"></ul>
*Italic attributes are optional
*Bold attributes are mandatory
Explanation
The velo-listitem-id attribute determines the name of the field that holds the id of the record in the return data.
The velo-listitem-text attribute determines the name of the field that holds the text of the record in the return data. This item will in other words be the visible part of the list item.
You can use multiple fields with using curly brackets. For example :
velo-listitem-text="{SupplierPortalName}, {SupplierPortalMainTown} in {SupplierPortalMainCountry}"
results in:
<li ...>VendorLink, Veenendaal in The Netherlands</li>
You can also use RESX labels in square brackets resulting in translated terms. For Example :
velo-listitem="[Name_Text]: {SupplierPortalName}"
results in:
<li ...>Naam: VendorLink</li>
Note: the text not between curly brackets will be copied one-on-one
Optional:
The velo-listitem-class attribute determines the name of the field that holds a extra class of the record in the return data. Use this if you want to do some extra css work based on the individual record, like a border color.
Class:
The class list-group-select will result in the ui effect that when a item is clicked it toggles between selected and not selected.
js
The work you need to do in JS:
var li = new Velo({
el: "suppliers-list", //Element id of the html parent element
type: "list-group-item", //Velo type to be added to the parent element
data: {
function: velo.Data.get.tasklists, //Which data is used, JSON. WebApi or DataTables
input: [] //Input parameters for the data call
},
onclick: {
function: "GetEditSupplier", //String with the on click function
buttonText: "..." //When filled, a button will be created for
//onclick action.
},
delete: {
function: "DeleteSupplier", //String with the "second" (delete) function
buttonText: "X", //Text for the delete function
buttonClass: "btn btn-danger" ///button Class of the delete function
}
});
Example: List of statussen in a planboard default in Admin - Planboard Defaults.
<div class="L100">
<ul id="ad_play_status_ul" velo-listitem-id="tlts_id" velo-listitem-text="tlts_status">
</ul>
</div>
function GetTaskListTemplateStatus(tltid) {
new Velo({
el: "ad_play_status_ul",
type: "list-group-item",
data: {
function: velo.Data.get.tasklisttemplatestatus,
input: [tltid]
},
delete: {
function: "DeleteTaskListTemplateStatus",
buttonText: "X"
}
});
}
Example with curly and square brackets; Example with DataTables data usage
<ul id="contractatt-esigninfo" class="list-group-select"
velo-listitem-id="esd_id"
velo-listitem-text="[EsignCode_Text]: {es_esigncode}, {file1_name}"
velo-listitem-class="es_status">
</ul>
const listInfo = new Velo({
el: "contractatt-esigninfo",
type: "list-group-item",
data: {
function: velo.Data.get.datatables.data,
input: ["CMEsignperattachment", "@userid", _id]
},
onclick: {
function: "GetEsigningFromContractAtt"
},
});
Formatting fields
Sometimes you want to format the data returned form the server, f.i. datetime to date. Therefor you can use predefined attributes in the curly brackets:
Example with datenice formatting:
<ul id="contractatt-esigninfo" class="list-group-select"
velo-listitem-id="esd_id"
velo-listitem-text="[EsignDate_Text]: {datenice:es_esigndate}, {file1_name}"
velo-listitem-class="es_status">
</ul>
Available attributes:
- datenice: Turns date format yyyy-MM-ddTHH:mm into localized date (dd-MM-yyyy)
- datetimenice: Turns date format yyyy-MM-dd HH:mm into localized date (dd-MM-yyyy hh:mm)
- number: Turns number in a multi decimal localized number (3,14)
- currency: Turns number in a two decimal localized number (3,14)
Multi dimensional data array
In case of the data of the webapi is a multi dimensional array you can use the path of the array in the field reference.
<ul id="contractatt-esigninfo" class="list-group-select"
velo-listitem-id="esd_id"
velo-listitem-text="[EsignDate_Text]: {datenice:Esign.es_esigndate}, {file1_name}"
velo-listitem-class="es_status">
</ul>
You can also count the number of child elements in an array, by using the count attribute
<ul id="contractatt-esigninfo" class="list-group-select"
velo-listitem-id="esd_id"
velo-listitem-text="Number of signer {count:Esign.Esigners}, {file1_name}"
velo-listitem-class="es_status">
</ul>
Logical
If you want to let the data returned decide what to do with the list-group-item you can use a logical expression.
The format of the logical expression is {if:expression:true return:false return}
{if:[SupplierContact.hasSupplierPortal]==1 && [SupplierContact.hasAuditRights]==1]:<div class='badge badge-green'></div>:}
Alert: The reference in the expression to the data fields can be made by square brackets in stead of curly brackets.