node-red-dashboard
node-red-dashboard copied to clipboard
FlowFuse
Add full content to Markdown-Node
Current Behavior
Content shows as text
Expected Behavior
Content shows as markdown
Steps To Reproduce
- make a Markdown-Text in a Template-Node
- connect to Dashboard Markdown-Node
- add {{ msg.payload }} to the Markdown-Node
Example:
[
{
"id": "fe10b74873aebcc0",
"type": "tab",
"label": "Flow 5",
"disabled": false,
"info": "",
"env": []
},
{
"id": "66d1e5776bc7e3ed",
"type": "inject",
"z": "fe10b74873aebcc0",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "str",
"x": 90,
"y": 100,
"wires": [
[
"25c4ceaa8ff3c491"
]
]
},
{
"id": "25c4ceaa8ff3c491",
"type": "template",
"z": "fe10b74873aebcc0",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "markdown",
"syntax": "plain",
"template": "# Markdown Content\n\n## Secondary Header\n\n### Third Header\n\nParagraph here...\n\ninline `<code-example />` with other text either side\n\n```js\n// multiline\nfunction () {\n console.log('hello world')\n}\n```\n\n- List Item 1\n- List Item 1\n- List Item 1\n- List Item 1\n\n[Hyperlink](https://news.bbc.co.uk)\n\n---\n\n> Lorum Ipsum Quotation Over two lines \n\n| Header 1 | Header 2 |\n|-|-|\n| eins | zwei |",
"output": "str",
"x": 300,
"y": 100,
"wires": [
[
"c61f4317ad20f535"
]
]
},
{
"id": "c61f4317ad20f535",
"type": "ui-markdown",
"z": "fe10b74873aebcc0",
"group": "be8440d16f7098fc",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"content": "{{ msg.payload }}",
"className": "",
"x": 490,
"y": 100,
"wires": [
[]
]
},
{
"id": "be8440d16f7098fc",
"type": "ui-group",
"name": "Group Name",
"page": "60fb1b70653660dd",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "60fb1b70653660dd",
"type": "ui-page",
"name": "Obsidian",
"ui": "863357a5c2346037",
"path": "/page3",
"icon": "home",
"layout": "grid",
"theme": "07f2253c8612a459",
"order": 4,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "863357a5c2346037",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "default",
"titleBarStyle": "default"
},
{
"id": "07f2253c8612a459",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Environment
- Dashboard version: 1.13.0
- Node-RED version: 4.0.2
- Node.js version: 18.20.3
- npm version: 10.7.0
- Platform/OS: Debian 12.6 (64-bit)
- Browser: Chromium 126.0.6478.126
Have you provided an initial effort estimate for this issue?
I am not a FlowFuse team member
Is there a reason for putting the markdown in a template, and not just in the markdown node itself?
No, but I use the markdown node. See
"id": "c61f4317ad20f535",
"type": "ui-markdown",...
I have a complete markdown string from somewhere (e.g. database) and would present that on dashboard. Is this possible? Thank You
Yep, you can just do:
{{ msg?.payload }}
in your Markdown template, pass the markdown via msg.payload and it'll render. See Docs
Hello Joe, I use @flowfuse/node-red-dashboard 1.13 and it will not run.
- I have a Input-Node with a string put in msg.payload-> # markdown header\n## secondheader\n\nmytext
- the Markdown-Node show me the String but not the Markdown The same result, when I use a Template-Node (for the linefeed). Maybe the Linefeed is the problem? How must the String formated to show correct in the Markdown-Node
Thank You very much
Thanks for the extra detail @buschhardtt - remembering now that we have an issue with rendering injected markdown: https://github.com/FlowFuse/node-red-dashboard/issues/615
I'll get @gayanSandamal to take a look at this more actively, as fixing this would close out both issues, and make ui-markdown considerably more useful.
The challenge is, we run the content through the markdown parser first, then any injected content (which can come at any time) is placed into the {{ }} placeholders, but not re-parsed again
Seems this is still an issue?
Markdown node content
{{msg?.payload || 'No Data'}}
Demo flow
[{"id":"ce701c71db9bdcae","type":"inject","z":"78e16b4550ea66cc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"### test","payloadType":"str","x":1854.104248046875,"y":301.1111145019531,"wires":[["50f224555df28de3"]]},{"id":"4801b8f155631751","type":"inject","z":"78e16b4550ea66cc","name":"","props":[{"p":"stateHistory","v":"[{\"ID\":3060911,\"StateReasonID\":386,\"StartDateTime\":\"2024-12-03T14:28:16.000Z\",\"EndDateTime\":\"2024-12-03T14:48:27.000Z\",\"ReasonName\":\"Machine/Material Adjustment\",\"ReasonCode\":201,\"Note\":\"\",\"LineID\":12,\"RunID\":58068,\"Active\":0,\"Time\":\"Dec 3rd 2024, 2:28:16 pm\",\"Reason\":\"\",\"EndTime\":\"Dec 3rd 2024, 2:48:27 pm\",\"Duration\":\"20m 11s\"},{\"ID\":3060897,\"StateReasonID\":387,\"StartDateTime\":\"2024-12-03T14:19:10.000Z\",\"EndDateTime\":\"2024-12-03T14:28:16.000Z\",\"ReasonName\":\"Running\",\"ReasonCode\":1,\"Note\":\"\",\"LineID\":12,\"RunID\":58068,\"Active\":0,\"Time\":\"Dec 3rd 2024, 2:19:10 pm\",\"Reason\":\"\",\"EndTime\":\"Dec 3rd 2024, 2:28:16 pm\",\"Duration\":\"9m 6s\"},{\"ID\":3060890,\"StateReasonID\":386,\"StartDateTime\":\"2024-12-03T14:13:49.000Z\",\"EndDateTime\":\"2024-12-03T14:19:10.000Z\",\"ReasonName\":\"Machine/Material Adjustment\",\"ReasonCode\":201,\"Note\":\"\",\"LineID\":12,\"RunID\":58068,\"Active\":0,\"Time\":\"Dec 3rd 2024, 2:13:49 pm\",\"Reason\":\"\",\"EndTime\":\"Dec 3rd 2024, 2:19:10 pm\",\"Duration\":\"5m 21s\"}]","vt":"json"},{"p":"run","v":"{\"ID\":57465,\"ScheduleID\":77910,\"RunStartDateTime\":\"2024-11-13T15:30:36.000Z\",\"RunStopDateTime\":\"2024-11-13T21:19:19.000Z\",\"StartInfeed\":0,\"CurrentInfeed\":0,\"StartOutfeed\":0,\"CurrentOutfeed\":0,\"StartWaste\":0,\"CurrentWaste\":0,\"TotalCount\":0,\"WasteCount\":0,\"GoodCount\":0,\"Availability\":0,\"Performance\":0,\"Quality\":0,\"OEE\":0,\"SetupStartDateTime\":null,\"SetupEndDateTime\":null,\"Runtime\":0,\"UnplannedDowntime\":0,\"PlannedDowntime\":0,\"TotalTime\":0,\"TimeStamp\":\"2024-11-13T21:19:19.000Z\",\"Closed\":1,\"EstimatedFinishTime\":null,\"ActualRate\":null,\"ScheduleRate\":null,\"ManualRun\":0,\"EndReason\":8,\"EndReasonDescription\":\"Pulled - Press - Printing Issues\",\"JobEnd\":0,\"start\":\"Nov 13th 2024, 3:30:36 pm\",\"end\":\"Nov 13th 2024, 9:19:19 pm\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1870,"y":180,"wires":[["b0d0f3fcb039693e"]]},{"id":"b0d0f3fcb039693e","type":"template","z":"78e16b4550ea66cc","name":"Prepare markdown","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"### Report Info\n\n* Run ID: {{run.ID}}\n* Schedule ID: {{run.ScheduleID}}\n* Start Time: {{run.start}}\n* End Time: {{run.end}}\n* End Reason: {{run.EndReasonDescription}}\n\n\n### Summary\n|OEE|Quality|Performance|Availability|TotalCount|GoodCount|WasteCount|\n|--|--|--|--|--|--|--|\n{{#run}}\n|{{OEE}}|{{Quality}}|{{Performance}}|{{Availability}}|{{TotalCount}}|{{GoodCount}}|{{WasteCount}}|\n{{/run}}\n\n### State History\nStart Time|Duration|Reason|Note|\n|--|--|--|--|\n{{#stateHistory}}\n|{{Time}}|{{Duration}}|{{{ReasonName}}}|{{{Note}}}|\n{{/stateHistory}}\n","output":"str","x":1934.104248046875,"y":221.11111450195312,"wires":[["50f224555df28de3"]]},{"id":"50f224555df28de3","type":"ui-markdown","z":"78e16b4550ea66cc","group":"948d6a3f3c50d90d","name":"","order":2,"width":0,"height":0,"content":"{{msg?.payload || 'No Data'}}","className":"","x":1974.104248046875,"y":261.1111145019531,"wires":[[]]},{"id":"948d6a3f3c50d90d","type":"ui-group","name":"Production Run","page":"5c04567d1b1c5644","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"5c04567d1b1c5644","type":"ui-page","name":"Production Run","ui":"708bb3301f1b4298","path":"/run","icon":"home","layout":"notebook","theme":"3e56fdfe6954aad4","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"708bb3301f1b4298","type":"ui-base","name":"ProveIt Dallas 2025","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"3e56fdfe6954aad4","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
This is also something that would come in very handy for us. Is there something we can help with to speed this up?
