Building a Role Aware UI

Building "Role-Aware" UI without Writing a Single Line of Code

How Fliddo puts server-side security and conditional rendering into the hands of designers.


The Problem: The "Hard-Coded" Permission Gap

In traditional web development, creating a "Members Only" area or a "Subscriber Dashboard" is a multi-step headache. You design the UI, hand it to a developer, and they write the if/else statements and middleware required to hide those elements from unauthorized eyes.

Most visual builders allow you to "hide" elements, but those elements are often still in the source code, merely masked with CSS (display: none). This is a security risk. To do it right, the server needs to decide whether to render the element at all based on the user's role.

The Fliddo Solution: The Logic Wrap

In the Fliddo editor, security isn't a setting buried in a CSS menu—it’s a Logic Node that physically wraps your components. We’ve turned a complex backend task into a simple, two-click visual action.

How it Works:

  1. Select any Component: Whether it’s a single button, a full navigation bar, or a "Managed Object" hero section.
  2. Click the Security Icon: In the floating Component Toolbar, you’ll find the "Is Logged In" and "Has Role" buttons.
  3. Define the Gate:
    • Is Logged In: The simplest gate. If a visitor isn't signed in, the section simply does not exist for them.
    • Has Role: A granular gate. Select specific roles like Admin, Editor, or Premium Member.

Behind the Scenes: Server-Side Security

When you wrap a component in a "Has Role" logic node, Fliddo generates the Maple Syntax for you automatically:

{ hasrole("admin") eq 1 }
  <div class="admin-panel">...</div>
{ end }

Because this is handled by the Maple Engine during the Live Rendering phase, the code is never sent to the browser of a non-admin user. It’s secure, lightweight, and completely invisible to the public.

Real-World Use Cases

  • Dynamic Navigation: Show a "Login" button to guests and a "My Account" link to members within the exact same header template.
  • Premium Content: Wrap a "Download PDF" button in a Subscriber role so only paying users can see the asset.
  • Admin Dashboards: Create a single page where "Edit" or "Delete" buttons only appear for users with Editor permissions.

Design Once, Control Everywhere. Fliddo allows you to build one master layout and use Logic Nodes to "gate" the specific parts that need protection, keeping your workflow fast and your data secure.

Reader Discussion