Create your first view description

This tutorial shows how to configure a view model once your domain is ready.

1. Prerequisites

  • A studio project that already contains the domain for your DSL.

  • At least one test project where you can create representations to validate the result.

2. Steps

  1. Open or create a studio project

    1. Navigate to the Project Browser on the homepage and create a new Studio project or reuse the one that stores your domain.

  2. Add a view model

    1. Create a new View model (this replaces the .odesign file from Sirius Desktop).

    2. Name it after the DSL or the representation bundle (for example DatabaseReview or RequirementFlow).

  3. Create the representation description

    1. Inside the view, add the representation type you need (Diagram, Table, Deck, Form, Tree, …).

    2. Set the domainType so the runtime knows on which semantic elements users can instantiate the representation.

    3. Configure the titleExpression and iconExpression that appear in tabs or launchers.

  4. Map semantic elements

    1. Add descriptions (nodes, edges, cards, rows, widgets) and point them to the appropriate domain entities.

    2. Provide a semanticCandidatesExpression, preconditions, and label expressions using AQL.

  5. Style and organize the view

    1. Reference color palettes and text style palettes to keep visual consistency.

    2. Add conditional styles to react to semantic state (status, priority, ownership, etc.).

  6. Add behavior

    1. Configure palette entries (create/delete/link) and customize the default tools if needed.

    2. Combine operations and optional Java services to implement complex behaviors.

  7. Test iteratively

    1. Reopen the test project, and create the representation.

    2. Adjust expressions, refresh the representation, and repeat until the UI matches your expectations.

3. Next steps

  • When the view behaves as expected, export the studio project or package it into your Sirius Web application.

  • Continue with other representation types or move on to View Description for deeper customization options.