So, you can go with one of the below two approaches:
- Server rendered with
www/dynamic pages. You can use the context in the HTML jinja template to load CSS/JavaScript or render HTML based on the logged in user. Single HTML file, but dynamic based on the session user. Here is a snippet of how it might look like:
<body>
{% if frappe.session.user == "hussain@frappe.io" %}
<!-- Some HTML -->
{% elif frappe.session.user in ["faris@frappe.io", "rushabh@frappe.io"] %}
<!-- Some other HTML -->
{% else %}
<!-- Yet some other HTML -->
{% endif %}
</body>
You can even load other HTML template on this page using:
{% include "frappe/templates/discussions/button.html" %}
Combine if/else with load content and your problem is solved.
- The SPA approach. Here you can use a VueJS/FrappeUI frontend, but instead of rendering conditionally on the backend using Jinja, you render on the frontend based on the session user. You can fetch data based on the user, you can apply styles based on the logged in user, etc. Here you can use other modern frontend features like client-side routing, reactive state etc.
Ultimately, its your call. But if you are only to use vanilla HTML/CSS/JavaScript, I would suggest to go with 1.
Hope this answer help!
![]()