UI Template - Tabbed interface for defining Component

[joepavitt]

Description

Proposed by @bartbutenaers here: https://discourse.nodered.org/t/dashboard-2-0-pre-alpha-available/80142/283?u=joepavitt

This would involve the default layout of the ui-template node following a similar pattern to the core function node whereby we offer tabs to assist with the creation of the underlying Vue Component:

We have a lot of users that are not familiar with VueJS, so we should be doing all we can to assist with their onboarding and developer experience of building custom widgets in ui-template.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[bartbutenaers]

Hi @joepavitt,

Thanks again for at least taking this into consideration!!

About my extra info on discourse, because @Steve-Mcl mentioned (correctly) that my idea would not be fun for Vue lovers.
We perhaps could add an extra tabsheet and checkbox:

Then we could support two scenario's, based on the checkbox status:

• Selected: All the tabsheets are disabled, except the "Vue component" tabsheet. In that tabsheet Vue lovers can enter manually the code for a Vue component:

  <template>
      <!-- Our HTML content will go here -->
  </template>
  
  <script>
  export default {
    name: 'MyComponent',
    methods: {
      // JS methods we want to use across our component will go here
    },
    mounted () {
      // Code we want to run when our component is loaded will go here
    },
    unmounted () {
      // Code we want to run when our component is unloaded will go here
    }
  }
  </script>
  
  <style>
      /* We can define custom CSS here too */
  </style>
  

• Unselected: All the tabsheets are enabled. The user can enter info on all these tabsheets. When the user opens the "Vue component" dashboard, the frontend code will automatically compose the Vue component code (and display it in a disabled editor so you cannot change it):

  <template>
      <!-- The html string from the 'Html' tabsheet will automatically be inserted here -->
  </template>
  
  <script>
  export default {
    name: 'MyComponent',
    methods: {
      // The javascript code from the 'Methods' tabsheet will automatically be inserted here
    },
    mounted () {
      // The javascript code from the 'Startup code' tabsheet will automatically be inserted here
    },
    unmounted () {
      // The javascript code from the 'Cleanup code' tabsheet will automatically be inserted here
    }
  }
  </script>
  
  <style>
      /* The css string from the 'CSS' tabsheet will automatically be inserted here */
  </style>
  

So in both cases the same Vue component string will be deployed to the server.

Hopefully this design could assist both types of users...

[joepavitt]

Another option here could be to have an "Advanced Mode" checkbook which gives you the text input we have now.

Then the default mode would your new, separated tab view?

My concern with the "Vue" tab at the end would be the two-way binding of that. What if someone edits that, how do we reflect that back in the other tabs reliably?

[bartbutenaers]

My propsal is in fact a one-way binding towards a disabled Vue component editor.
Hopefully this visual comparison explains it better:

And when you deselect the checkbox perhaps show a confirmation box that all your manual changes in the "Vue component" tabsheet will get overwritten by generated code.

[bartbutenaers]

So when you unselect the checkbox, you can view the read-only generated Vue component code in a disabled Monaco editor. By having a look at the generated code, people might gain Vue knowledge over time.

Like in the Blockly node we also show the generated javascript in a second tabsheet. The generated javascript (from the Blockly blocks) is also read only, but that way people over time might perhaps gain knowledge. And it also helps while troubleshooting my node, when the generated code contains issues :-)

[joepavitt]

Hi @diego780705 - thanks for the feedback.

Will quickly address this:

Item to note: Message input in the ui_template node is going straight to output, this should be optional and not happen.

With a note that it is mentioned in our migration progress and it's explicitly covered by #354

I will also mention that you can susbcribe to incoing events in ui-template with:

mounted () {
    this.$socket.on("msg-input" + this.id, (msg) => {
        // do stuff with msg
    })
}

I hope you don't mind, but I'm going to answer the rest in two separate parts, both of which I'll be moving over the to the Node-RED Forum. This way, many others can learn from it, and it doesn't distract from Bart's proposals here regarding UI changes to the UI Template editor in Node-RED.

1. I have addressed the 4 points here- https://discourse.nodered.org/t/ui-template-feedback-thoughts/83579
2. Your migration of Dashboard 1.0 ui-templates - https://discourse.nodered.org/t/migrating-dashboard-1-0-ui-template-to-dashboard-2-0/83578

Hope that's okay, and we can continue those particular points of discussion in their relevant threads.

[joepavitt]

Thanks @diego780705 any future queries and questions, please direct to the Node-RED or FlowFuse forums. That way, I can answer then where rest of the community can see too.

Happy to help however I can. I'm confident in what we've built with ui-template, I'm yet to see anything it can't do

[joepavitt]

Just working back through some older issues, given how well ui-template has been received in it's current form, and the complexities that would be involved in building this out, I'm going to make a call and say that this isn't a direction I want to go into with it and close the issue.