I am trying to figure out how to build this. I think it is a Tab Layout with the tabs changed to vertical but I cannot find a property to change it.
This is used by NodeRun for all the work-space preview descriptions. But I cannot find an example of how it is built. thanks in advance.
This specific component is not something that is shipped as a NodeRun built-in widget. It was built using custom JavaScript. You can certainly implement something like this from scratch in NodeRun, but it would require a custom JavaScript implementation, and would generally take some time.
The closes thing that is built-in is NodeRun’s Accordion Layout widget, which is easy to use and takes just a few clicks to setup. However, it splits up the sections vertically rather than horizontally. Hopefully, that’s ok for what you need.
If you really do need the sections to be rotated horizontally, it can be done with a bit of CSS code, and I have a quick example:
Run it: https://noderun.com/run/alex/rotated-accordion-example/
Open it: https://noderun.com/ide/alex/rotated-accordion-example/
But there may be some limitations to this approach of using CSS. For example, you would still have to be working in a vertical manner within the Visual Designer.
Very Cool, I will play with that. Thank you.
Hello again,
I am looking to gain a better understanding of coding an Accordion that is going to have a grid in 3 of 4 of its sections. The fourth section will have various other widgets that will determine what I write to my database as runtime configurations for yet another application. What i am missing is how to trigger/call the server side functions that do the work for each “section”. The onclick, onsectionclick properties are talking to the client/browser I want to be setting something for express server to see that it happened. Am I thinking about this wrong? I did look for examples and found only some “responsive tab” and customAccordian examples which don’t contain anything like what I am looking for. Thanks in advance. I promise I do look for documentation, examples before posting here.
Hello David,
If I understand your question correctly, you want the values you change in one of the accordion tabs to be applied to your server side database when you change accordion tabs is this correct?
A simple way to do this would be to have the program submit the screen back to the server side, process the data, and re-display the screen. One way you can do this is to use the onsectionclick property to run a pui.click() call to submit the screen to the server. Then you can also bind the ‘active section’ property to a field so that the accordion will display the correct tab to the user when the screen is re-displayed, instead of defaulting to the first tab every time.
An alternative could be to add a ‘save’ button to the screen. It would function very similar to above, in that it would submit the screen to the server using pui.click(), and you would need to bind the ‘active section’ property to display the correct tab when the screen is drawn again.
With that being said, you could also accomplish this goal with web-services / micro-services. You could build a web-service that would modify your runtime configurations in the back end, and then modify the widgets that set your that runtime configurations in the screen to call the web-service you created via a ajax() call in the onchange event. (https://docs.profoundlogic.com/x/4wBK)
Could you review the above and let me know if any of these options would work for what you are trying to accomplish?
Thanks,
Kyle Law
Technical Support Specialist
Profound Logic Software