{"id":1122,"date":"2017-06-22T11:11:17","date_gmt":"2017-06-22T18:11:17","guid":{"rendered":"https:\/\/blogs.plm.automation.siemens.com\/t5\/Teamcenter-Blog\/Declarative-UI-Configuration-with-Active-Workspace\/ba-p\/417017"},"modified":"2026-03-26T08:49:16","modified_gmt":"2026-03-26T12:49:16","slug":"declarative-ui-configuration-with-active-workspace","status":"publish","type":"post","link":"https:\/\/blogs.sw.siemens.com\/teamcenter\/declarative-ui-configuration-with-active-workspace\/","title":{"rendered":"Declarative UI Configuration with Active Workspace"},"content":{"rendered":"

This article on declarative UI is the second in a series on web UI development using declarative configuration, which simplifies how your IT team can deliver an adaptive product lifecycle management (PLM) environment. Read the first declarative configuration<\/a><\/em> blog for background, and read on to learn about the Siemens strategy to help you deliver Active Workspace solutions tailored to your unique business processes through declarative UI configuration of re-usable components, instead of writing custom software code. Read the third declarative programming <\/a>blog to learn how to author Active Workspace commands.<\/em><\/p>\n

Last time I wrote about declarative configuration<\/a><\/span>, I set the scene for how the rate of change in the web world is both a blessing and a curse. In particular, the continual change in web frameworks can seriously impact agility and the ability to react to adopting new versions of web frameworks or entirely new frameworks.<\/span><\/p>\n

This time I\u2019m going to cover a quick introduction to Declarative UI<\/strong>. To recap, declarative UI is a new capability provided by Active Workspace that allows for a concise, codeless and prescriptive definition of the UI view content, along with its layout, routing, and behaviors. Actions, messages, events, service calls and their inputs\/outputs can be mapped and described. It provides an abstracted means of declaratively defining the client UI and its behaviors so that how<\/em> it is implemented is hidden.<\/span><\/p>\n

Artifacts of a declarative UI<\/strong><\/h2>\n

A declarative definition for a piece of the UI has two main artifacts – the View <\/strong>and View Model<\/strong>.<\/p>\n

The View<\/strong> is simple HTML markup. It simply defines the content of a panel or page. It is responsible for the View hierarchy and is made up ofUI Elements<\/strong> which provide the vocabulary of building blocks to create the UI. The View maps to data<\/em>, actions<\/em>, conditions<\/em> and internationalized text (i18n<\/em>) that are defined in the corresponding View Model<\/strong>. visible-when, enabled-when, exist-when<\/em> clauses allow control of the UI elements\u2019 visibility, enablement, and presence in the DOM. The View can declaratively refer to run-time application contexts such as the selected object, current user or additional contexts that can be registered.<\/p>\n

The View must be semantically meaningful; that\u2019s to say I can read it and get a picture of the intent of the UI.<\/p>\n

 \"DeclarativeView and View Model<\/span><\/span>So far the View is HTML5. So what\u2019s new? Together the View and View Model provides an abstracted means of declaratively defining the UI and its behaviors. We don’t expose CSS classes, raw divs or any implementation details. Crucially how<\/em> it is implemented is hidden\/abstracted. So this means the UI element can be created as a reusable building block and the desired styling is internally predefined and aligned to the overall styling and theming. The View and View Model doesn\u2019t expose which web framework we are using behind the scenes for the runtime or indeed for the internal implementation of any given element. This means it is possible to adopt new versions of the web framework or change frameworks with less impact.<\/p>\n

It also means we have orders of magnitude less code. Pages and panels can be created declaratively without the need to write lots of code. The declarative UI elements are internally codeful but are used codelessly. For those familiar with Teamcenter XRT stylesheet definitions, using the declarative markup is just as simple.<\/span><\/p>\n

The View Model<\/strong> is JSON text. It is responsible for view state such as data, actions, conditions, events, messages, and localizations. It specifies imports for the UI elements consumed so they can be demand-loaded. When needed there is support for codeful extensions. The mental model to use is of a kind of finite state machine \u2013 we have data, conditions can query the data, actions can update data, events can be fired, etc.<\/span><\/p>\n

\"DeclarativeView Model interactions mental model<\/span><\/span><\/span><\/p>\n

Declarative UI elements <\/strong><\/h2>\n

UI elements form our vocabulary of building blocks we can use to declaratively define our pages and panels. By analogy, some of these UI elements are \u201catoms<\/em>\u201d, in that they are small and fundamental,from which we can build larger molecules<\/em>, small organisms<\/em> right up to higher-order small mammal <\/em>sized elements \ud83d\ude09<\/p>\n

\"DeclarativeUI elements – from atoms, molecules, small organisms to small mammals<\/span><\/span> is a complete reference for the UI elements available for customers of Teamcenter in the Active Workspace Document Center (customer-only access)<\/a> that includes working examples with the view and view model snippets for you to easily copy and paste into your extensions.<\/p>\n

Declarative UI in action<\/strong><\/h2>\n

So now you\u2019ve been introduced to the primary artifacts of declarative UI let\u2019s deep dive and walk through an example of declarative in action. For the following scenario, we have an Active Workspace user who is creating a saved search for \u201cEd\u2019s unassigned bolts.\u201d A saved search allows the user to save the search criteria (its filters and search terms) such that it can be reused in the future. Having searched for \u201cbolts,\u201d then filtered those that are owned by \u201cEd, Engineer\u201d and which have a release status of \u201cunassigned,\u201d the user has launched the save search command (the slide-out panel on the right) and has entered the name to give the saved search which is a required field.<\/p>\n

\"DeclarativeCreating a saved search<\/span><\/span> command panel has been declaratively defined. The 15 lines of markup to describe the UI in the declarative View is the following. Note how it maps to actions, data, conditions, and localizations in the View Model.\"DeclarativeDeclarative View for saved search command panel<\/span><\/span><\/p>\n

The following sequence gives an overview of the user\u2019s actions and how the declarative definition realizes them.<\/p>\n

So when the user clicks \u201csave\u201d\u2026\"DeclarativeWhen the user clicks \u201cSave\u201d<\/span><\/span><\/p>\n

As it happens a saved search with this name already exists, so we ask the user if they want to overwrite it or cancel the save.<\/p>\n

\"Declarative<\/span><\/p>\n

\"DeclarativeUser is asked whether they wish to overwrite or cancel creation of the existing saved search<\/span><\/span><\/p>\n

The user chooses to overwrite and a new saved search is created.<\/p>\n

\"Declarative<\/span><\/p>\n

\"DeclarativeUser chooses to overwrite and a new saved search is created<\/span><\/span><\/p>\n

Hopefully, that\u2019s given you a taste of how declarative UI in Active Workspace provides a concise, codeless and prescriptive definition of the UI view content and its layout. Also, routing and behaviors can be defined with actions, messages, events, service calls and mapping of inputs\/outputs. It provides an abstracted means of providing declarative configuration of the client UI and its behaviors so that how<\/em> it is implemented is hidden.<\/span><\/p>\n

Now we\u2019ve introduced the fundamentals of declarative configuration next time we\u2019ll cover declarative UI for commands. In the meantime, I\u2019d love to see your feedback and comments \u2026 and suggestions for future blog topics.<\/p>\n

Dave McLeish<\/span><\/p>\n

Senior Key Expert, CTO Office of Architecture & Technology, Siemens PLM<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

This article on declarative UI is the second in a series on web UI development using declarative configuration, which simplifies how your IT team can deliver an adaptive product lifecycle management …<\/p>\n","protected":false},"author":30224,"featured_media":1153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spanish_translation":"","french_translation":"","german_translation":"","italian_translation":"","polish_translation":"","japanese_translation":"","chinese_translation":"","footnotes":""},"categories":[1],"tags":[444,26],"industry":[],"product":[],"coauthors":[],"class_list":["post-1122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-active-workspace","tag-plm-foundation"],"featured_image_url":"https:\/\/blogs.sw.siemens.com\/wp-content\/uploads\/sites\/14\/2019\/09\/Declarative-UI_10-1.png","_links":{"self":[{"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/posts\/1122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/users\/30224"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/comments?post=1122"}],"version-history":[{"count":5,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/posts\/1122\/revisions"}],"predecessor-version":[{"id":5938,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/posts\/1122\/revisions\/5938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/media\/1153"}],"wp:attachment":[{"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/media?parent=1122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/categories?post=1122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/tags?post=1122"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/industry?post=1122"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/product?post=1122"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blogs.sw.siemens.com\/teamcenter\/wp-json\/wp\/v2\/coauthors?post=1122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}