You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by da...@apache.org on 2019/01/09 07:25:56 UTC

[isis] 01/04: ISIS-2080: updates docs for alternate layouts and also @ActionLayout#redirect

This is an automated email from the ASF dual-hosted git repository.

danhaywood pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/isis.git

commit 6b578997b8ae9794a7d2e3596e1dc29282ac3478
Author: danhaywood <da...@haywood-associates.co.uk>
AuthorDate: Tue Jan 8 15:21:16 2019 +0000

    ISIS-2080: updates docs for alternate layouts and also @ActionLayout#redirect
---
 .../rgant/_rgant-ActionLayout_promptStyle.adoc     |   6 +-
 .../guides/rgant/_rgant-ActionLayout_redirect.adoc |  60 ++++++++++++
 .../guides/rgcms/_rgcms_methods_reserved.adoc      |  14 +--
 .../rgcms/_rgcms_methods_reserved_cssClass.adoc    |  14 ++-
 .../guides/rgcms/_rgcms_methods_reserved_hide.adoc |   3 +-
 .../rgcms/_rgcms_methods_reserved_iconName.adoc    |  20 +++-
 .../rgcms/_rgcms_methods_reserved_layout.adoc      |  48 +++++++++
 .../rgcms/_rgcms_methods_reserved_title.adoc       |  23 ++---
 .../guides/ugvw/_ugvw_layout_file-based.adoc       | 107 ++++++++++++---------
 .../guides/ugvw/images/layouts/customer-order.png  | Bin 6026 -> 5981 bytes
 10 files changed, 216 insertions(+), 79 deletions(-)

diff --git a/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_promptStyle.adoc b/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_promptStyle.adoc
index 1a7c8cf..e3b58f4 100644
--- a/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_promptStyle.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_promptStyle.adoc
@@ -6,7 +6,7 @@
 
 
 The `promptStyle()` attribute is used to specify whether, when invoking an action associated with a domain object property, the parameters for the action are prompted either in modal dialog box, a (non-modal) sidebar dialog box, or is prompted using an inline panel (replacing the property on the page).
-For more on sidebar vs modal dialogs, see p#_ugvw_features_sidebar-vs-modal-dialogs[Wicket viewer features].
+For more on sidebar vs modal dialogs, see xref:../ugvw/ugvw.adoc#_ugvw_features_sidebar-vs-modal-dialogs[Wicket viewer features].
 
 The prompt style is influenced by two xref:../ugvw/ugvw.adoc#_ugvw_configuration-properties[configuration properties]:
 
@@ -47,6 +47,6 @@ Assuming that the corresponding property is not itself editable, this means that
 The net effect is that a property conceptually consisting of different parts (eg a name, an address or a date) can be updated using an action that lets each separate part be specified independently.
 
 
-As an alternative to using the annotation, the dynamic xref:../ugvw/ugvw.adoc#_ugvw_layout_file-based[file-based layout] can be used instead, eg:
+As an alternative to using the annotation, the dynamic xref:../ugvw/ugvw.adoc#_ugvw_layout_file-based[file-based layout] can be used instead.
+
 
-NOTE: FIXME - provide .layout.xml example here
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_redirect.adoc b/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_redirect.adoc
new file mode 100644
index 0000000..45111bd
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/guides/rgant/_rgant-ActionLayout_redirect.adoc
@@ -0,0 +1,60 @@
+[[_rgant-ActionLayout_redirect]]
+= `redirect()`
+:Notice: Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by applicable law or ag [...]
+:_basedir: ../../
+:_imagesdir: images/
+
+
+Often an action, when invoked, will return the target (in other words, will "return this").
+The `redirect()` attribute is used to control how the object is re-rendered.
+
+There are three options:
+
+* if set to `ONLY_IF_DIFFERS`, then the existing web page will not be re-rendered, rather it will be updated in-place (using Ajax).
++
+This makes for a smoother UI.
++
+[NOTE]
+====
+Any properties with xref:rgant.adoc#_rgant-PropertyLayout_unchanging[`@PropertyLayout#unchanging`] are _not_ updated.
+====
+
+* if set to `EVEN_IF_SAME`, then a redirect occurs and a new web page is rendered.
+
+* if set to `AS_CONFIGURED`, then the default behaviour is as specified by the `isis.viewer.wicket.redirectEvenIfSameObject` xref:../ugvw/ugvw.adoc#_ugvw_configuration-properties[configuration property]).
+
+One use case for choosing `EVEN_IF_SAME` is if the action "returning this" is intended in some way to require that the object use a different layout, as per multiple layout support, as specified using the xref:rgcms.adoc#_rgcms_methods_reserved_layout[`layout()`] method.
+
+For example:
+
+[source,java]
+----
+public class Customer {
+
+    @Getter @Setter
+    @PropertyLayout(hidden=ALWAYS)
+    private String layout;
+
+    public String layout() {                // <1>
+        return layout;
+    }
+
+    @ActionLayout(
+        redirect=EVEN_IF_SAME               // <2>
+    )
+    public Customer switchToEditMode() {
+        setLayout("edit");
+        return this;
+    }
+}
+----
+<1> specifies the alternate layout to use, eg `Customer-edit.layout.xml`.
+<2> even though this action returns the same target object, still re-render the page.
+
+
+If `switchToEditMode()` action is invoked, then the UI will attempt to render the customer using a `Customer.layout.edit.xml` layout file (instead of the default `Customer.layout.xml`).
+
+
+As an alternative to using the annotation, the dynamic xref:../ugvw/ugvw.adoc#_ugvw_layout_file-based[file-based layout] can be used instead.
+
+
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved.adoc b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved.adoc
index 929b5ec..4705c11 100644
--- a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved.adoc
@@ -16,15 +16,14 @@ The table below lists the reserved methods that are recognized as part of Apache
 |Description
 
 |xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
-|Provides a CSS class for this object instance.  In conjunction with xref:../rgcfg/rgcfg.adoc#_rgcfg_application-specific_application-css[`application.css`], can therefore provide custom styling of an object instance wherever it is rendered. +
-
-See also xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`] and xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`].
+|Provides a CSS class for this object instance.
+In conjunction with xref:../rgcfg/rgcfg.adoc#_rgcfg_application-specific_application-css[`application.css`], can therefore provide custom styling of an object instance wherever it is rendered.
 
 |xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_disable[`disable(...)`]
 |Disable all or some of an object's properties
 
 |xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_getId[`getId()`]
-|Provides an optional unique identifier of a service. +
+|Provides an optional unique identifier of a service.
 
 If not provided, the service's fully-qualified class name is used.
 
@@ -32,15 +31,12 @@ If not provided, the service's fully-qualified class name is used.
 |Hide all or some of an object's properties
 
 |xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`]
-|Provides the name of the image to render, usually alongside the title, to represent the object. If not provided, then the class name is used to locate an image. +
-
-See also xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`] and xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
+|Provides the name of the image to render, usually alongside the title, to represent the object.
+If not provided, then the class name is used to locate an image.
 
 |xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`]
 |Provides a title for the object. +
 
-See also xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`] and xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
-
 |xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_validate[`validate()`]
 |Validate the object's state prior to persisting.
 
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_cssClass.adoc b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_cssClass.adoc
index 0f578bc..f593808 100644
--- a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_cssClass.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_cssClass.adoc
@@ -8,12 +8,14 @@
 
 The `cssClass()` returns a CSS class for a particular object instance.
 
-The xref:../ugvw/ugvw.adoc#[Wicket viewer] wraps the object's representation in a containing `<div>` with the class added.  This is done both for rendering the object either in a table or when rendering the object on its own page.
+The xref:../ugvw/ugvw.adoc#[Wicket viewer] wraps the object's representation in a containing `<div>` with the class added.
+This is done both for rendering the object either in a table or when rendering the object on its own page.
 
 In conjunction with xref:../rgcfg/rgcfg.adoc#_rgcfg_application-specific_application-css[`application.css`], can therefore provide custom styling of an object instance wherever it is rendered. +
 
 
-For example, the (non-ASF) http://github.com/isisaddons/isis-app-todoapp[Isis addons' todoapp] uses this technique to add a strikethrough for completed todo items.  This is shown on the home page:
+For example, the (non-ASF) http://github.com/isisaddons/isis-app-todoapp[Isis addons' todoapp] uses this technique to add a strikethrough for completed todo items.
+This is shown on the home page:
 
 image::{_imagesdir}reference-methods/reserved/cssClass/strikethrough.png[width="800px",link="{_imagesdir}reference-methods/reserved/cssClass/strikethrough.png"]
 
@@ -43,4 +45,10 @@ tr.done {
 ----
 
 
-See also xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`] and xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`].
+== See also
+
+See also:
+
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_layout[`layout()`]
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_hide.adoc b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_hide.adoc
index d23963c..699e3e6 100644
--- a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_hide.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_hide.adoc
@@ -6,7 +6,8 @@
 
 
 
-One use case that Apache Isis supports is that of a domain object with a lifecycle whereby at some stage some number of the object's members should be hidden.  For example, for an object that at some stage is logically immutable, we might want to make all its properties/collections unmodifiable and hide all its actions.
+One use case that Apache Isis supports is that of a domain object with a lifecycle whereby at some stage some number of the object's members should be hidden.
+For example, for an object that at some stage is logically immutable, we might want to make all its properties/collections unmodifiable and hide all its actions.
 
 While we could write a separate xref:../rgcms/rgcms.adoc#_rgcms_methods_prefixes_hide[`hide...()`] method for each and every action, this could become painful.  So instead Isis allows a single `hide...(...)` method to be implemented that is applied to all members.
 
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_iconName.adoc b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_iconName.adoc
index 0af3731..91cbf68 100644
--- a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_iconName.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_iconName.adoc
@@ -5,9 +5,14 @@
 :_imagesdir: images/
 
 
-Every object is represented by an icon; this is based on the domain object's simple name.  The xref:../ugvw/ugvw.adoc#[Wicket viewer] searches for the image in the same package as the `.class` file for the domain object or in the `images` package. It will find any matching name and one of the followign suffexes `png`, `gif`, `jpeg`, `jpg`, `svg`. If none is found, then `Default.png` will be used as fallback.
+Every object is represented by an icon; this is based on the domain object's simple name.
+The xref:../ugvw/ugvw.adoc#[Wicket viewer] searches for the image in the same package as the `.class` file for the domain object or in the `images` package.
+It will find any matching name and one of the following suffixes `.png`, `.gif`, `.jpeg`, `.jpg` or `.svg`.
+If none is found, then `Default.png` will be used as fallback.
 
-The `iconName()` allows the icon that to be used to change for individual object instances.  These are usually quite subtle, for example to reflect the particular status of an object.  The value returned by the `iconName()` method is added as a suffix to the base icon name.
+The `iconName()` allows the icon that to be used to change for individual object instances.
+These are usually quite subtle, for example to reflect the particular status of an object.
+The value returned by the `iconName()` method is added as a suffix to the base icon name.
 
 For example, the (non-ASF) http://github.com/isisaddons/isis-app-todoapp[Isis addons' todoapp] uses this technique to add an overlay for todo items that have been completed:
 
@@ -15,7 +20,7 @@ image::{_imagesdir}reference-methods/reserved/iconName/differing.png[width="200p
 
 
 
-The screenshot below shows the location of these png icon files:
+The screenshot below shows the location of these `.png` icon files:
 
 image::{_imagesdir}reference-methods/reserved/iconName/png-files.png[width="200px",link="{_imagesdir}reference-methods/reserved/iconName/png-files.png"]
 
@@ -33,4 +38,11 @@ public class ToDoItem ... {
 }
 ----
 
-See also xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`] and xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
+== See also
+
+See also:
+
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_layout[`layout()`]
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_layout.adoc b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_layout.adoc
new file mode 100644
index 0000000..93bc95f
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_layout.adoc
@@ -0,0 +1,48 @@
+[[_rgcms_methods_reserved_layout]]
+= `layout()`
+:Notice: Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by applicable law or ag [...]
+:_basedir: ../../
+:_imagesdir: images/
+
+
+Every object has a xref:../ugvw/ugvw.adoc#layout[layout] .
+This may be specified using annotations such as xref:../rgant/rgant.adoc#_rgant_MemberOrder[`@MemberOrder`]xref:../rgant/rgant.adoc#_rgant_DomainObjectLayout[`@DomainObjectLayout`] and the like,  but it much more commonly specified using an xref:ugvw.adoc#_ugvw_layout_file-based [XML layout file].
+
+The `layout` method allows the domain object to specify an alternate layout to its usual layout.
+
+For example:
+
+[source,java]
+----
+public class Customer {
+
+    @Getter @Setter
+    @PropertyLayout(hidden=ALWAYS)
+    private String layout;
+
+    public String layout() {                // <1>
+        return layout;
+    }
+
+    @ActionLayout(
+        redirect=EVEN_IF_SAME               // <2>
+    )
+    public Customer switchToEditMode() {
+        setLayout("edit");
+        return this;
+    }
+}
+----
+<1> specifies the alternate layout to use, eg `Customer-edit.layout.xml`.
+<2> even though this action returns the same target object, still re-render the page.
+
+If `switchToEditMode()` action is invoked, then the UI will attempt to render the customer using a `Customer.layout.edit.xml` layout file (instead of the default `Customer.layout.xml`).
+
+
+== See also
+
+See also:
+
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_title[`title()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
diff --git a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_title.adoc b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_title.adoc
index aeded30..6765099 100644
--- a/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_title.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/rgcms/_rgcms_methods_reserved_title.adoc
@@ -6,11 +6,15 @@
 
 
 
-Every object is represented by a title.  This appears both as a main header for the object when viewed as well as being used as a hyperlink within properties and collections.   It therefore must contain enough information for the end-user to distinguish the object from any others.
+Every object is represented by a title.
+This appears both as a main header for the object when viewed as well as being used as a hyperlink within properties and collections.
+It therefore must contain enough information for the end-user to distinguish the object from any others.
 
-This is most commonly done by including some unique key within the title, for example a customer's SSN, or an order number, and so forth.  However note that Apache Isis itself does _not_ require the title to be unique; it is merely recommended in most cases.
+This is most commonly done by including some unique key within the title, for example a customer's SSN, or an order number, and so forth.
+However note that Apache Isis itself does _not_ require the title to be unique; it is merely recommended in most cases.
 
-An object's title can be constructed in various ways, but the most flexible is to use the `title()` method.  The signature of this method is usually:
+An object's title can be constructed in various ways, but the most flexible is to use the `title()` method.
+The signature of this method is usually:
 
 [source,java]
 ----
@@ -50,16 +54,13 @@ As the example above shows, the implementation can be as complex as you like.
 In many cases, though, you may be able to use the xref:../rgant/rgant.adoc#_rgant-Title[`@Title`] annotation.
 
 
-See also xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`] and xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
-
-
-
-
-
-
-
 
 
+== See also
 
+See also:
 
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_iconName[`iconName()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_cssClass[`cssClass()`]
+* xref:../rgcms/rgcms.adoc#_rgcms_methods_reserved_layout[`layout()`]
 
diff --git a/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_layout_file-based.adoc b/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_layout_file-based.adoc
index c7fa049..d7968c4 100644
--- a/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_layout_file-based.adoc
+++ b/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_layout_file-based.adoc
@@ -31,15 +31,26 @@ The `Xxx.layout.xml` file is just the serialized form of a xref:../rgcms/rgcms.a
 These are JAXB-annotated classes with corresponding XSD schemas; the upshot of that is that IDEs such as IntelliJ and Eclipse can provide "intellisense", making iteasy to author such layout files.
 
 
+== Alternative Layouts
+
+A domain object may also have multiple layouts.
+For example, there may be the capability to switch into an "edit" mode, which perhaps hides some class members, shows others (perhaps mixins specific to data entry).
+Another reason might be to support different tenancies/user groups, where different business processes might require a slightly different UI representation.
+
+One way in which the domain object can specify an alternate layout is through its xref:rgcms.adoc#_rgcms_methods_reserved_layout[`layout()`] method.
+If this returns a non-null value, say "edit", then this is used to locate an alternative layout, in the form `Xxx-edit.layout.xml`.
+
 
 == Search Algorithm (Library Support)
 
-For a given domain object `Xxx` the framework initially searches for a file (on the classpath) called `Xxx.layout.xml`.
+For a given domain object `Xxx`, if it has specified a layout `yyy`, then the framework will search for a file `Xxx.yyy.layout.xml` on the classpath.
 
-If this can't be found, then the framework will search for a file named `Xxx.layout.fallback.xml`.
+If no layout has been specified (or if the specified layout cannot be found), then the framework searches for a file called `Xxx.layout.xml`.
+
+Finally, if this can't be found, then the framework will search for a file named `Xxx.layout.fallback.xml`.
 If present, this will be used instead.
 
-This therefore allows libraries that provide a domain entities/view models (for example, the (non-ASF) link:http://platform.incode.org[Incode Platform] modules) to define the UI of these objects using a layout file, while still allowing the consuming application to override that layout if it so requires.
+The "fallback" layout this therefore allows libraries that provide a domain entities/view models (for example, the (non-ASF) link:http://platform.incode.org[Incode Platform] modules) to define the UI of these objects using a layout file, while still allowing the consuming application to override that layout if it so requires.
 
 
 
@@ -117,28 +128,28 @@ This corresponds to the following XML:
 
 [source,xml]
 ----
-    <bs3:row>
-        <bs3:col span="12" unreferencedActions="true">
-            <c:domainObject bookmarking="AS_ROOT"/>
-        </bs3:col>
-    </bs3:row>
-    <bs3:row>
-        <bs3:col span="12">
-            <bs3:tabGroup>
-                <bs3:tab name="Properties">...</bs3:tab>
-                <bs3:tab name="Other">...</bs3:tab>
-                <bs3:tab name="Metadata">...</bs3:tab>
-            </bs3:tabGroup>
-        </bs3:col>
-    </bs3:row>
-    <bs3:row>
-        <bs3:col span="12">
-            <bs3:tabGroup unreferencedCollections="true">
-                <bs3:tab name="Similar to">...</bs3:tab>
-                <bs3:tab name="Dependencies">...</bs3:tab>
-            </bs3:tabGroup>
-        </bs3:col>
-    </bs3:row>
+<bs3:row>
+    <bs3:col span="12" unreferencedActions="true">
+        <c:domainObject bookmarking="AS_ROOT"/>
+    </bs3:col>
+</bs3:row>
+<bs3:row>
+    <bs3:col span="12">
+        <bs3:tabGroup>
+            <bs3:tab name="Properties">...</bs3:tab>
+            <bs3:tab name="Other">...</bs3:tab>
+            <bs3:tab name="Metadata">...</bs3:tab>
+        </bs3:tabGroup>
+    </bs3:col>
+</bs3:row>
+<bs3:row>
+    <bs3:col span="12">
+        <bs3:tabGroup unreferencedCollections="true">
+            <bs3:tab name="Similar to">...</bs3:tab>
+            <bs3:tab name="Dependencies">...</bs3:tab>
+        </bs3:tabGroup>
+    </bs3:col>
+</bs3:row>
 ----
 
 
@@ -156,29 +167,29 @@ This corresponds to the following XML:
 
 [source,xml]
 ----
-            <bs3:tab name="Properties">
-                <bs3:row>
-                    <bs3:col span="6">
-                        <c:fieldSet name="General" id="general" unreferencedProperties="true">
-                            <c:action id="duplicate" position="PANEL_DROPDOWN"/>
-                            <c:action id="delete"/>
-                            <c:property id="description"/>
-                            <c:property id="category"/>
-                            <c:property id="subcategory">
-                                <c:action id="updateCategory"/>
-                                <c:action id="analyseCategory" position="RIGHT"/>
-                            </c:property>
-                            <c:property id="complete">
-                                <c:action id="completed" cssClassFa="fa-thumbs-up"/>
-                                <c:action id="notYetCompleted" cssClassFa="fa-thumbs-down"/>
-                            </c:property>
-                        </c:fieldSet>
-                    </bs3:col>
-                    <bs3:col span="6">
-                        ...
-                    </bs3:col>
-                </bs3:row>
-            </bs3:tab>
+<bs3:tab name="Properties">
+    <bs3:row>
+        <bs3:col span="6">
+            <c:fieldSet name="General" id="general" unreferencedProperties="true">
+                <c:action id="duplicate" position="PANEL_DROPDOWN"/>
+                <c:action id="delete"/>
+                <c:property id="description"/>
+                <c:property id="category"/>
+                <c:property id="subcategory">
+                    <c:action id="updateCategory"/>
+                    <c:action id="analyseCategory" position="RIGHT"/>
+                </c:property>
+                <c:property id="complete">
+                    <c:action id="completed" cssClassFa="fa-thumbs-up"/>
+                    <c:action id="notYetCompleted" cssClassFa="fa-thumbs-down"/>
+                </c:property>
+            </c:fieldSet>
+        </bs3:col>
+        <bs3:col span="6">
+            ...
+        </bs3:col>
+    </bs3:row>
+</bs3:tab>
 ----
 
 The tab defines two columns, each span of 6 (meaning half the width of the page).
diff --git a/adocs/documentation/src/main/asciidoc/guides/ugvw/images/layouts/customer-order.png b/adocs/documentation/src/main/asciidoc/guides/ugvw/images/layouts/customer-order.png
index b0aa271..d3541a9 100644
Binary files a/adocs/documentation/src/main/asciidoc/guides/ugvw/images/layouts/customer-order.png and b/adocs/documentation/src/main/asciidoc/guides/ugvw/images/layouts/customer-order.png differ