# HTML Advance Details For Portal

**URL:** <https://forum.novacura.com/t/html-advance-details-for-portal/605>\
**Category:** Flow Classic\
**Tags:** portal\
**Created:** [January 17, 2024, 6:46am UTC](https://forum.novacura.com/t/html-advance-details-for-portal/605 "2024-01-17T06:46:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Santhosh](https://avatars.discourse-cdn.com/v4/letter/s/7C9FD7/32.png) [@Santhosh](https://forum.novacura.com/u/Santhosh)\
**Post date:** [January 17, 2024, 6:46am UTC](https://forum.novacura.com/t/html-advance-details-for-portal/605/1 "2024-01-17T06:46:31Z")

</div>

Hi All,

I am Tring to Create a UI Using HTMIL Advance In Portal.

But I Don’t have in detail information about this, May I Now the Possibility Using This.

And if possible, can you able to share some Example UI Designed Using HTML Advance.

And Also, When I write a HTML statement in the body the data seems to be repeating, can you share me a Solution on this.

Regards,  
Santhosh

---

<div class="post-metadata">

**Author:** ![JessikaI](https://avatars.discourse-cdn.com/v4/letter/j/7C9FD7/32.png) [@JessikaI](https://forum.novacura.com/u/JessikaI)\
**Post date:** [January 17, 2024, 10:20am UTC](https://forum.novacura.com/t/html-advance-details-for-portal/605/2 "2024-01-17T10:20:58Z")

</div>

Hi Santhosh,  
Here is some inspiration of what is possible:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/novacuratalk/original/1X/7da41a85712fe8b124dde0434467e557f8740fb8.png)

In both of them (the table and the buttons) I write the html in a flow (datasource = workflow) and add the script as a variable in the Body section (i.e. {HTMLscript} ). Reason for not writing it directly in the portal is to have the change history functionality.  
First three buttons go to different portal pages, last one triggers a machine flow and then refreshes the current page.

In flow, I write the script in a script step, like this:  
let **WorkingTbl** = table(HTMLscript);  
set **WorkingTbl** = WorkingTbl &  
[  
HTMLscript:  
' '&  
'\<a style=“position: absolute; top: 60px; left: 30px; height: 60px; width: 250px; border-radius: 6px; outline: none; '&  
'padding: 15px; text-align: center; text-decoration: none; color: black; font-size: 20px; font-weight: bold; '&  
'background-color: #f3a98eff;” ‘&  
‘href=“http:// _server:port_ /Novacura.Flow.6.client.portal2/?page=tPgNbEgF”\>Larm  
’& **UncategorizedCount** &’ st '&  
' ’  
];  
return **WorkingTbl** ;

Reason I use ’ ’ and & is for the readability in flow; a bit annoying in setup, but helps a lot for the next person reading the code.

Good luck with your UI design!

BR,  
Jessika

---

<div class="post-metadata">

**Author:** ![JessikaI](https://avatars.discourse-cdn.com/v4/letter/j/7C9FD7/32.png) [@JessikaI](https://forum.novacura.com/u/JessikaI)\
**Post date:** [January 17, 2024, 10:27am UTC](https://forum.novacura.com/t/html-advance-details-for-portal/605/3 "2024-01-17T10:27:14Z")

</div>

code:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/novacuratalk/original/1X/513884a90b9b304f774e4ab43282fd4d2439199c.png)
