Re: [node-red] Inline editing of table displayed data with UI-Template in AngularJS

[Nick O'Leary]

(for some reason your two posts to the group last night were flagged as spam and were waiting moderation..)

On Thu, 15 Jun 2017 23:40 Jéan Roux, <je...@familyroux.com> wrote:

Hi, I am using data inbound from MySQL node, with a query selecting the appropriate data, into a UI Template, and then presenting the array with the AngularJS ng repeat construct, as follows:

<div class="container col-md-12" >

<table class="table" style="width:100%" border="1">

<style>

th, td {text-align: middle};

</style>

<h3>Table Client</h3>

<tr>

    <th>idclient</th>

    <th>clientname</th>

    <th>webpage</th>

</tr>

<tbody>

    <tr ng-repeat="x in msg.payload | limitTo:10 ">

        <td>{{x.idclient}}</td>

        <td>{{x.clientname}}</td>

        <td>{{x.webpage}}</td>

</tbody>

</table>

</div>

I now need to be able to INSERT a row into the same table from here, or even UPDATE by selecting a row, where it then need to open another UI-TEMPLATE, where the row can be inserted / updated. I find a lot on the web expaining how one does this in Angular JS, like this http://jsfiddle.net/martlark/upftnrdz/ link. (although I do not want buttons)

But, I do not understand how to shape this for NodeRed, using a UI-Template.

Then I assume one could package JSON object with the inserted row, or updated fields, pump this into a function that builds the INSERT of UPDATE statement, and back into a MySQL node. Is this the way to do it? How would the Angular code look like in UI-Template ?

Anybody with some ideas? Jéan. 

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/17945350-b7cb-4bc5-b5f0-2406fc61ae66%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Javier Andrés Fernández]

Hi Jéan,

Could you find  an answer for this? I have the same problem as you.

Javier

[Jéan Roux]

Yes Javier, not at home until the weekend, I will share on Sunday night

[Jéan Roux]

Javier, studied your request in more detail. No, I did not get an answer. But this is an Angular JS- or one of the other JS frameworks problem, not so much a node-red problem. And since some Angular JS are already in NodeRed, one could get away with some actions. Search google for 'angularJS editable JS table'. I have not yet cracked this problem, but I need to soon. 

The other problem I have is that I need to show a table with 'lazy load' capabilities, showing screens of lists, where the table only loads x records, to fit on a screen, with buttons to page to next page, last page, first page etc. Search google for 'angularJS lazy load editable table'. There are many solutions shown, but with my limited JS skills, I am unsure as to how to implement them.

Maybe another direction to look into is also an example on flows, here: https://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758

Hope this helps? If you get this working, let us know please?

[Julian Knight]

While Dashboard is great for quickly getting going, it does come with a number of limitations. One of the main ones is that you do not get full access to the Angular framework. This makes it impossible, I think, to use Angular plugins/extensions.

If you are prepared to swap the convenience and integration of Dashboard for something else, you can of course build any interface in Node-RED. To assist with this I created the node-red-contrib-uibuilder node. This doesn't have any of the fancy features of Dashboard but it does allow you to use ANY front-end framework and get full access to it. Example code is included for simple JQuery dynamic page use and there are standard functions for working with the msg from Node-RED over websockets (well Socket.IO actually). You should be able to use Anglular, REACT, Vue or anything else. Of indeed, just simple JQuery if you don't need the advanced features of the other frameworks. JQuery has a number of well established table plugins.

[Jéan Roux]

Thank you Julian! I will look into this, thank you for the guidance.

You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/K1PbVkBWXPg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/ce7a80e2-a6e9-4ce0-b2d6-d9ce544ca19c%40googlegroups.com.