Somehow I don't get your description.
In each item:
Perhaps it's the wrong way to go with fixed nodes and you should better go with ui-template node? It's much more flexible.
Alright, i answer your questions.
Who will be able to edit content?
Some collaborators who need to post content and feed the dashboard. The idea is to give them a way to make it easy and fast with no complications.
How will content be created by which tool?
Using NR , like we are doing now. The idea is to fill the nodes with information and replicate them throught the dasboard.
How many items will be shown and shall their amount be dynamic?
A lot of items, maybe 15 or 20 and will be more every month all in the same format that i've been sharing you.
ITEMS:
*Which text parts should get a fixed style?
Only the "accion de la integracion", the rest is fine.
Which text part is dynamic and are there some rules for styling?
Dynamic will be every node that contains some text.
Context: What i need to do with all of this?.
The mail goal here is to document some proyects but inside NR, we have integrations but i need to make some documentacion with information about the integration.
When the development of the integration is done i need the colaborator to fill all the nodes and deploy that to the dasboard.
Thanks a lot !
To get the styles independend from the group headings you can change the css styles in your template node:
[
{
"id": "cc6931f7fb8c7d79",
"type": "ui_template",
"z": "5c42798006c66cf9",
"group": "75ebc3ea4eb4a464",
"name": "",
"order": 0,
"width": 0,
"height": 0,
"format": "<style>\n #Tab_Integraciones{\n height: unset !important;\n }\n \n\n #Tab_Integraciones ui-card-panel{\n height: initial !important;\n }\n \n \n #Tab_Integraciones ui-card-panel div div[style]{\n height: fit-content !important;\n }\n \n \n .group-integracion{\n height: initial !important;\n }\n \n .group-integracion md-card.nr-dashboard-spacer{\n align-items: flex-start !important;\n position: relative !important;\n top: 0px !important;\n \n }\n \n .main-title-content{\n align-items: flex-start !important;\n height: auto !important;\n position: relative !important;\n }\n \n .no-gap{\n top: 0px !important;\n }\n \n .accion p.value{\n white-space: pre-wrap; \n font-weight: lighter;\n }\n \n</style>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 480,
"y": 120,
"wires": [
[]
]
},
{
"id": "75ebc3ea4eb4a464",
"type": "ui_group",
"name": "Mainfolder",
"tab": "",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
}
]
But for your case it would be better to build up some input form. By clicking submit store the items to a database (mysql?). An ui-template node where you create a list (by ng-repeat) could show up everything.
Great approach!
Yes, i should maybe think about and input so the user can fill the text and so.
One last question. I was struggling about adding some button to collapse and expand all the groups. The main problem is that i can hide or show the group, so the whole tab disapear.
I only need to hide this part.
Thanks a lot as always!
As I understood you need one button to toggle all groups 'Integracion'.
This could be done by javascript in a template node. This is my code extended by such button:
[
{
"id": "5c42798006c66cf9",
"type": "tab",
"label": "ui text list",
"disabled": false,
"info": "",
"env": []
},
{
"id": "cc6931f7fb8c7d79",
"type": "ui_template",
"z": "5c42798006c66cf9",
"group": "75ebc3ea4eb4a464",
"name": "",
"order": 0,
"width": 0,
"height": 0,
"format": "<style>\n #Tab_Integraciones{\n height: unset !important;\n }\n \n\n #Tab_Integraciones ui-card-panel{\n height: initial !important;\n }\n \n \n #Tab_Integraciones ui-card-panel div div[style]{\n height: fit-content !important;\n }\n \n \n .group-integracion{\n height: initial !important;\n }\n \n .group-integracion md-card.nr-dashboard-spacer{\n align-items: flex-start !important;\n position: relative !important;\n top: 0px !important;\n \n }\n \n .main-title-content{\n align-items: flex-start !important;\n height: auto !important;\n position: relative !important;\n }\n \n .no-gap{\n top: 0px !important;\n }\n \n .accion p.value{\n white-space: pre-wrap; \n font-weight: lighter;\n }\n \n</style>\n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 480,
"y": 180,
"wires": [
[]
]
},
{
"id": "3dbe9d32c436b399",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 5,
"width": 0,
"height": 0,
"name": "accion de la integracion",
"label": "Accion de la integracion: ",
"format": "<font color=\"red\" face=\"Verdana, Geneva, sans-serif\" size=\"+1\">Your formatted text goes here</font><br><br><font color=\"green\" face=\"Arial, sans-serif\" size=\"+2\">Your formatted text goes here</font>",
"layout": "col-center",
"className": "main-title-content no-gap accion",
"x": 470,
"y": 400,
"wires": []
},
{
"id": "03e3adf34cbb9b09",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 2,
"width": 0,
"height": 0,
"name": "",
"label": "Link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 460,
"y": 320,
"wires": []
},
{
"id": "b9d102b946a03e1e",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 450,
"y": 360,
"wires": []
},
{
"id": "b954633a650aec7b",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 450,
"y": 280,
"wires": []
},
{
"id": "9a692ed446dd9dbb",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 5,
"width": 0,
"height": 0,
"name": "accion de la integracion",
"label": "Accion de la integracion: ",
"format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
"layout": "col-center",
"className": "main-title-content no-gap",
"x": 730,
"y": 400,
"wires": []
},
{
"id": "1b77904bb91bf146",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 2,
"width": 0,
"height": 0,
"name": "",
"label": "Link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 720,
"y": 320,
"wires": []
},
{
"id": "60bf1febb72e75b2",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 710,
"y": 360,
"wires": []
},
{
"id": "63122ae1f60fe340",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 710,
"y": 280,
"wires": []
},
{
"id": "33c11e60e32b2470",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "a6c861f47fcceaf1",
"order": 2,
"width": 0,
"height": 0,
"name": "",
"label": "Link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 960,
"y": 320,
"wires": []
},
{
"id": "625f29715f67a2b5",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "a6c861f47fcceaf1",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 950,
"y": 360,
"wires": []
},
{
"id": "220ebf94b8b0b691",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "a6c861f47fcceaf1",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 950,
"y": 280,
"wires": []
},
{
"id": "153914a2c96637b7",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "a6c861f47fcceaf1",
"order": 5,
"width": 0,
"height": 0,
"name": "accion de la integracion",
"label": "Accion de la integracion: ",
"format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
"layout": "col-center",
"className": "main-title-content no-gap",
"x": 970,
"y": 400,
"wires": []
},
{
"id": "69144e9f75a165e3",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 5,
"width": 0,
"height": 0,
"name": "",
"label": "Accion de la integracion: ",
"format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
"layout": "col-center",
"className": "main-title-content no-gap",
"x": 210,
"y": 400,
"wires": []
},
{
"id": "7bd10f7b871bfdef",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 2,
"width": 0,
"height": 0,
"name": "",
"label": "link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 200,
"y": 320,
"wires": []
},
{
"id": "483637e5982f370d",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 190,
"y": 360,
"wires": []
},
{
"id": "529471e595ab508f",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 1,
"width": "6",
"height": 1,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 190,
"y": 280,
"wires": []
},
{
"id": "20e30f7b82a882fa",
"type": "ui_template",
"z": "5c42798006c66cf9",
"group": "142084ae08525fb8",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"format": "\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n try{\n if(msg.topic == 'toggle'){\n const fields = angular.element('.group-integracion');\n for(let i=0; i<fields.length; i++){\n fields[i].children[0].children[0].click();\n } \n }\n \n }catch(err){\n \n }\n \n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 460,
"y": 540,
"wires": [
[]
]
},
{
"id": "950853115bad046c",
"type": "ui_button",
"z": "5c42798006c66cf9",
"name": "",
"group": "142084ae08525fb8",
"order": 1,
"width": 0,
"height": 0,
"passthru": false,
"label": "Toggle",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "toggle",
"topicType": "str",
"x": 270,
"y": 540,
"wires": [
[
"20e30f7b82a882fa"
]
]
},
{
"id": "f83d063021812bbe",
"type": "ui_spacer",
"z": "5c42798006c66cf9",
"name": "spacer",
"group": "a6fa0dc0e2e95533",
"order": 5,
"width": "1",
"height": "1"
},
{
"id": "f7424580221ade1a",
"type": "ui_spacer",
"z": "5c42798006c66cf9",
"name": "spacer",
"group": "0adbef6a3e5d67d1",
"order": 4,
"width": 1,
"height": 1
},
{
"id": "e58180ddc40b5724",
"type": "ui_spacer",
"z": "5c42798006c66cf9",
"name": "spacer",
"group": "ef24eb1736360550",
"order": 4,
"width": 1,
"height": 1
},
{
"id": "2a2f57c039fe2783",
"type": "ui_spacer",
"z": "5c42798006c66cf9",
"name": "spacer",
"group": "34fccbc9b0bce08d",
"order": 4,
"width": 1,
"height": 1
},
{
"id": "c4ee05282116e217",
"type": "ui_spacer",
"z": "5c42798006c66cf9",
"name": "spacer",
"group": "a6c861f47fcceaf1",
"order": 4,
"width": 1,
"height": 1
},
{
"id": "75ebc3ea4eb4a464",
"type": "ui_group",
"name": "Mainfolder",
"tab": "",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "ef24eb1736360550",
"type": "ui_group",
"name": "Integracion 2",
"tab": "40cee9400744ee4c",
"order": 3,
"disp": true,
"width": "6",
"collapse": true,
"className": "group-integracion"
},
{
"id": "34fccbc9b0bce08d",
"type": "ui_group",
"name": "Integracion 3",
"tab": "40cee9400744ee4c",
"order": 4,
"disp": true,
"width": "6",
"collapse": true,
"className": "group-integracion"
},
{
"id": "a6c861f47fcceaf1",
"type": "ui_group",
"name": "integracion 4",
"tab": "40cee9400744ee4c",
"order": 5,
"disp": true,
"width": "6",
"collapse": true,
"className": "group-integracion"
},
{
"id": "0adbef6a3e5d67d1",
"type": "ui_group",
"name": "Integracion 1",
"tab": "40cee9400744ee4c",
"order": 2,
"disp": true,
"width": "6",
"collapse": true,
"className": "group-integracion"
},
{
"id": "142084ae08525fb8",
"type": "ui_group",
"name": "Controls",
"tab": "40cee9400744ee4c",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "a6fa0dc0e2e95533",
"type": "ui_group",
"name": "Integracion pruebaa prueba pruebaa",
"tab": "",
"order": 2,
"disp": true,
"width": "15",
"collapse": true,
"className": "group-integracion"
},
{
"id": "40cee9400744ee4c",
"type": "ui_tab",
"name": "Integraciones",
"icon": "launch",
"order": 2,
"disabled": false,
"hidden": false
}
]
To get the buttons click ripple you must tweak the classes until you reach your goal. Somehow the ripple is hidden by our tweaks before. But this should be repairable.
Wow! Thanks a lot!.
I will continue from what you did.
Thanks a lot!
Hi @knoepsche
One last thing to ask you if you can help me out.
I need to automatically position every tab inside the dashboard. Look the next image is like over positioned or overlaped.
This is my last updated nodes.
[
{
"id": "69144e9f75a165e3",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 7,
"width": 0,
"height": 0,
"name": "",
"label": "Accion de la integracion: ",
"format": "# Descripción General Esta integración es utilizada por el Bot (Bot_Tarjeta_Carrefour) para el canal whatsapp. Se encarga de realizar la request y obtener una respuesta del servicio externo para obtener el token que se ultilizara en otro servicio. --- ## Entrada Parámetros de entrada necesarios: Los paramtros estan codeados en la url --- ## Información general de las acciones realizadas * La integración se encarga de armar el request en formato JSON con la información recibida y consulta el servicio externo (token). * El servicio externo devuelve un JSON del cual se procesa la respuesta para luego ser utiliza por el bot * Si el servicio externo devuelve un HTTP statusCode distinto a 200, el mismo será devuelvo al bot, lo que generará que el bot reaccione con el escenario de error. * La integracion obtiene la informacion de la respuesta, se valida que sea correcta y se envian al bot. --- ## Salida La salida es una estructura JSON con los campos: -`token_type` String, tipo de token `session_code` String, codigo que representa el id de la sesion (Conversacion). `access_token` String, el token. --- ## Logs Se encontrarán los logs en la siguiente query: `s1_components_node_red_application_query` bajo el flow: `bsf-tarjeta_carrefour-token`",
"layout": "col-center",
"className": "main-title-content no-gap text-formatting accion",
"x": 170,
"y": 260,
"wires": []
},
{
"id": "7bd10f7b871bfdef",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 4,
"width": 0,
"height": 0,
"name": "",
"label": "link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 160,
"y": 180,
"wires": []
},
{
"id": "483637e5982f370d",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 5,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 150,
"y": 220,
"wires": []
},
{
"id": "529471e595ab508f",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 150,
"y": 140,
"wires": []
},
{
"id": "1273479e5e8cec31",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 1,
"width": 0,
"height": 0,
"name": "Plataforma",
"label": "Plataforma:",
"format": "integracion",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 130,
"y": 300,
"wires": []
},
{
"id": "83aa788915f1e27b",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 2,
"width": 0,
"height": 0,
"name": "cliente",
"label": "Cliente:",
"format": "cliente",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 110,
"y": 340,
"wires": []
},
{
"id": "3dbe9d32c436b399",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 7,
"width": 0,
"height": 0,
"name": "accion de la integracion",
"label": "Accion de la integracion: ",
"format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
"layout": "col-center",
"className": "main-title-content no-gap text-formatting",
"x": 430,
"y": 260,
"wires": []
},
{
"id": "03e3adf34cbb9b09",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 420,
"y": 180,
"wires": []
},
{
"id": "b9d102b946a03e1e",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 5,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 410,
"y": 220,
"wires": []
},
{
"id": "b954633a650aec7b",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 410,
"y": 140,
"wires": []
},
{
"id": "9a692ed446dd9dbb",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 7,
"width": 0,
"height": 0,
"name": "accion de la integracion",
"label": "Accion de la integracion: ",
"format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
"layout": "col-center",
"className": "main-title-content no-gap text-formatting",
"x": 690,
"y": 260,
"wires": []
},
{
"id": "1b77904bb91bf146",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 680,
"y": 180,
"wires": []
},
{
"id": "60bf1febb72e75b2",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 5,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 670,
"y": 220,
"wires": []
},
{
"id": "63122ae1f60fe340",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 670,
"y": 140,
"wires": []
},
{
"id": "e6582f3830e827d0",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 2,
"width": 0,
"height": 0,
"name": "Plataforma",
"label": "Plataforma:",
"format": "integracion",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 390,
"y": 300,
"wires": []
},
{
"id": "2ab39561390ee73b",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 4,
"width": 0,
"height": 0,
"name": "cliente",
"label": "Cliente:",
"format": "cliente",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 370,
"y": 340,
"wires": []
},
{
"id": "1f3c3d95ed916283",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 2,
"width": 0,
"height": 0,
"name": "Plataforma",
"label": "Plataforma:",
"format": "integracion",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 650,
"y": 300,
"wires": []
},
{
"id": "b3ecbc7f3b086f97",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 4,
"width": 0,
"height": 0,
"name": "cliente",
"label": "Cliente:",
"format": "cliente",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 630,
"y": 340,
"wires": []
},
{
"id": "644965dc237de874",
"type": "ui_template",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"name": "",
"order": 7,
"width": 0,
"height": 0,
"format": "<style>\n .group-integracion{\n font-weight: bold !important;\n }\n .ui-card-panel div div[style]{\n height: initial !important;\n }\n .nr-dashboard-cardpanel btn-colapsar_contraer{\n left: 0px !important;\n }\n .nr-dashboard-cardpanel p{\n min-height:20px\n ;\n }\n .nr-dashboard-text .value{\n font-weight: normal !important;\n }\n .nr-dashboard-text p {\n margin-top: 0.5em;\n margin-right: 0.3em;\n }\n .nr-dashboard-theme .nr-dashboard-spacer {\n opacity: 1;\n background-color: #00acab;\n height: 10px !important;\n position: relative;\n top: 5px !important;\n }\n .nr-dashboard-cardcontainer {\n background: #e2e2e2 !important;\n }\n .body.nr-dashboard-theme md-content md-card {\n background: #e2e2e2 !important;\n font-family: \"Roboto\", sans-serif !important;\n font-size: 15px;\n }\n .nr-dashboard-theme ui-card-panel {\n background: #e2e2e2 !important;\n }\n .body.nr-dashboard-theme md-content {\n background: #f4f4f5 !important;\n }\n .group-integracion{\n height: initial !important;\n }\n .group-integracion md-card.nr-dashboard-spacer {\n align-items: flex-start !important;\n }\n .main-title-content{\n align-items: flex-start !important;\n height: auto !important;\n position: relative !important;\n }\n .no-gap{\n top: 0px !important;\n }\n .main-title-content{\n text-align: justify;\n }\n .accion p.value{\n white-space: pre-wrap; \n font-weight: lighter;\n }\n \n</style>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 120,
"y": 80,
"wires": [
[]
]
},
{
"id": "6984dcbaed371463",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "0adbef6a3e5d67d1",
"order": 2,
"width": 0,
"height": 0,
"name": "query kibana",
"label": "Query Kibana",
"format": "s1_integracion_lalala",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 130,
"y": 380,
"wires": []
},
{
"id": "aed315506b63464e",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "ef24eb1736360550",
"order": 2,
"width": 0,
"height": 0,
"name": "query kibana",
"label": "Query Kibana",
"format": "s1_integracion_lalala",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 390,
"y": 380,
"wires": []
},
{
"id": "6525ce13b66e3547",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "34fccbc9b0bce08d",
"order": 2,
"width": 0,
"height": 0,
"name": "query kibana",
"label": "Query Kibana",
"format": "s1_integracion_lalala",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 650,
"y": 380,
"wires": []
},
{
"id": "e2c4b04028019591",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 4,
"width": 0,
"height": 0,
"name": "",
"label": "Link a carpeta Gdrive",
"format": "http://gdrive.com",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 920,
"y": 180,
"wires": []
},
{
"id": "b1e86f07127722c8",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 6,
"width": 0,
"height": 0,
"name": "",
"label": "Salida al servicio:",
"format": "PUBLICO",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 910,
"y": 220,
"wires": []
},
{
"id": "195b3f68cee4b1a7",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 1,
"width": 0,
"height": 0,
"name": "",
"label": "Numero de caso: ",
"format": "1234567",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 910,
"y": 140,
"wires": []
},
{
"id": "47bc7042ca81444d",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 8,
"width": 0,
"height": 0,
"name": "accion de la integracion",
"label": "Accion de la integracion: ",
"format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
"layout": "col-center",
"className": "main-title-content no-gap",
"x": 930,
"y": 260,
"wires": []
},
{
"id": "a7490caaccd38656",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 2,
"width": 0,
"height": 0,
"name": "Plataforma",
"label": "Plataforma:",
"format": "integracion",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 890,
"y": 300,
"wires": []
},
{
"id": "aa44f8c462f9982b",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 5,
"width": 0,
"height": 0,
"name": "cliente",
"label": "Cliente:",
"format": "cliente",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 870,
"y": 340,
"wires": []
},
{
"id": "223cbbd4acf8be7c",
"type": "ui_text",
"z": "5c42798006c66cf9",
"group": "b5f26e8a7bebd713",
"order": 3,
"width": 0,
"height": 0,
"name": "query kibana",
"label": "Query Kibana",
"format": "s1_integracion_lalala",
"layout": "row-left",
"className": "main-title-content no-gap",
"x": 890,
"y": 380,
"wires": []
},
{
"id": "0adbef6a3e5d67d1",
"type": "ui_group",
"name": "AtentoSV Indra",
"tab": "af9fda516bcd11b1",
"order": 1,
"disp": true,
"width": "6",
"collapse": true,
"className": "group-integracion"
},
{
"id": "ef24eb1736360550",
"type": "ui_group",
"name": "Integracion 2",
"tab": "af9fda516bcd11b1",
"order": 3,
"disp": true,
"width": 6,
"collapse": true,
"className": "group-integracion"
},
{
"id": "34fccbc9b0bce08d",
"type": "ui_group",
"name": "Integracion 3",
"tab": "af9fda516bcd11b1",
"order": 2,
"disp": true,
"width": 6,
"collapse": true,
"className": "group-integracion"
},
{
"id": "b5f26e8a7bebd713",
"type": "ui_group",
"name": "cliente nuevo",
"tab": "af9fda516bcd11b1",
"order": 4,
"disp": true,
"width": "6",
"collapse": true,
"className": "group-integracion"
},
{
"id": "af9fda516bcd11b1",
"type": "ui_tab",
"name": "Cliente_2",
"icon": "dashboard",
"order": 4,
"disabled": false,
"hidden": false
}
]
Thanks a lot again!.
Regards.
Hi Marty1982
in your template node exchange this style class:
.nr-dashboard-cardcontainer {
background: #e2e2e2 !important;
height: fit-content !important;
}
Wow! Thanks a lot!
Hi!
One last question.
Is there any chance to apply a transition to the card panel when collapse?. I think it might be cool but i couldn't find how to do it.
Thanks a lot!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy