Does anybody know a good way to represent a list of files on the dashboard? I am getting ["fireworks.h264","heat.h264","maint.h264","test.h264"] from a file list node and would like to show this list on the UI. I have installed the list the ui_list package but formatting the input is getting past me.
The example for the input for the ui_list looks like
[{"title":"<b>Apple</b>","description":"This is description of <font color=\"red\"><b>Apple</b></b>.","icon":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/500px-Red_Apple.jpg"},{"title":"<b>Banana</b>","description":"This is description of <font color=\"yellow\"><b>Banana</b></font>(no picture).","icon":null},{"title":"<b>Orange</b>","description":"This is description of <font color=\"orange\"><b>Orange</b></font>.","icon":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Ambersweet_oranges.jpg/440px-Ambersweet_oranges.jpg"},{"title":"<b>Watermelon</b>","description":"This is description of <font color=\"green\"><b>Watermelon</b></font>.","icon":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Vampire_watermelon.jpg/440px-Vampire_watermelon.jpg"}]
I just need the files listed out on the UI I dont need titles or descriptions... thoughts?
There is a contributed list node now for Dashboard, that might help.
Otherwise, use a template and ngRepeat in a list or table.
You mean the ui_list node the OP talks about trying in the question 
Oops! Missed that. Serves me right for replying while watching a favourite YouTube channel. 
Yes I can use that list node but I am unsure how to format it from what I am getting to go into the list. So far have been unsuccessful at dumping the array. I somehow need to tag each one with a title as it comes in and output that to the list node.
How would I separate all the items and add in the "description": between them before going into the list node?
Have you looked up how to use ngRepeat? That will let you do whatever you want with the data, you can use it in a Dashboard template node.
To use ui_list you need to convert your array of strings into an array of objects as per the info box... for a simple list you just need to set the title property. so a simple function like this should do it
msg.payload = msg.payload.map(function(i) {
return {title:i};
});
return msg;
worth reading up on the javascript array.map function - Array.prototype.map() - JavaScript | MDN
following this... I have since updated the ui-list example node to version 0.1.5 and included that capability so now it will detect if it gets a simple array of strings and will convert them as required, so your original example should now work with the latest ui-list.
2 Likes
Confusion: searching in the Manage Palette dialog for "ui_list" produces both node-red-contrib-ui_list and node-red-node-ui_list. Digging a bit deeper on GitHub, they look almost identical but have different version numbers. What's up?
We moved it from contributed to the project directory so renamed it node. Must do housekeeping and remove contrib
1 Like
