The ViewInView feature is a way to bring in a view within a view. It is another way to add a Nested ViewModel that does not use the table grid. ViewInView uses the mount strategy to add Nested ViewModels. <a href="/Documentation:Mounted_ViewModel" title="Documentation:Mounted ViewModel" data-bs-title="Documentation:Mounted_ViewModel">The Mounted ViewModel</a> is merged into the view where it is mounted.

Mounted ViewModels can be used to display data from association links.

Example

Showing a category and it's products without using the Nested ViewModel.

<a href="/File:2024-07-18_16h56_20.png" class="image" data-bs-title="File:2024-07-18_16h56_20.png" data-bs-filetimestamp="20240718135801"><img alt="Mounted ViewModel Example" src="/images/thumb/9/9c/2024-07-18_16h56_20.png/830px-2024-07-18_16h56_20.png" decoding="async" width="830" height="359" class="thumbimage" srcset="/images/thumb/9/9c/2024-07-18_16h56_20.png/1245px-2024-07-18_16h56_20.png 1.5x, /images/thumb/9/9c/2024-07-18_16h56_20.png/1660px-2024-07-18_16h56_20.png 2x" /></a>

<a href="/File:2024-07-18_16h56_20.png" class="internal" title="Enlarge"></a>

1. Create the the ViewModel to be mounted, the ViewModel should be rooted for instance attributes.

<a href="/File:2024-07-18_16h43_56.png" class="image" data-bs-title="File:2024-07-18_16h43_56.png" data-bs-filetimestamp="20240718134648"><img alt="View to be mounted" src="/images/thumb/8/83/2024-07-18_16h43_56.png/803px-2024-07-18_16h43_56.png" decoding="async" width="803" height="485" class="thumbimage" srcset="/images/thumb/8/83/2024-07-18_16h43_56.png/1205px-2024-07-18_16h43_56.png 1.5x, /images/thumb/8/83/2024-07-18_16h43_56.png/1606px-2024-07-18_16h43_56.png 2x" /></a>

<a href="/File:2024-07-18_16h43_56.png" class="internal" title="Enlarge"></a>

2. Go to the category page and add the ViewInView widget to page by selecting it from the options on the right and drawing it on the page.

3. Set the Column Name

4. Set the expression for the data to be loaded in the Mounted View Model.

5. Set the ViewModel property to the ViewModel to be mounted.

<a href="/File:2024-07-18_14h40_48.png" class="image" data-bs-title="File:2024-07-18_14h40_48.png" data-bs-filetimestamp="20240718123301"><img alt="Example of ViewInView feature" src="/images/thumb/3/30/2024-07-18_14h40_48.png/871px-2024-07-18_14h40_48.png" decoding="async" width="871" height="516" class="thumbimage" srcset="/images/thumb/3/30/2024-07-18_14h40_48.png/1307px-2024-07-18_14h40_48.png 1.5x, /images/thumb/3/30/2024-07-18_14h40_48.png/1742px-2024-07-18_14h40_48.png 2x" /></a>

<a href="/File:2024-07-18_14h40_48.png" class="internal" title="Enlarge"></a>

The ViewInView widget is also available in the context menu of the ViewModel

<a href="/File:2024-07-18_17h03_36.png" class="image" data-bs-title="File:2024-07-18_17h03_36.png" data-bs-filetimestamp="20240718140651"><img alt="2024-07-18 17h03 36.png" src="/images/thumb/a/ad/2024-07-18_17h03_36.png/807px-2024-07-18_17h03_36.png" decoding="async" width="807" height="406" class="thumbimage" srcset="/images/thumb/a/ad/2024-07-18_17h03_36.png/1211px-2024-07-18_17h03_36.png 1.5x, /images/a/ad/2024-07-18_17h03_36.png 2x" /></a>

<a href="/File:2024-07-18_17h03_36.png" class="internal" title="Enlarge"></a>

Other Pages on ViewModels

• <a href="/Documentation:Mounted_ViewModel" title="Documentation:Mounted ViewModel" data-bs-title="Documentation:Mounted_ViewModel">Mounted ViewModel</a>