Layouts

A Layout is a top level component in the Glue layer that provides an entry point into a page.  The layout is initialised on page load and it provides a number of context methods that child components can utilise.

Configuring the Layout

The UI platform namespace contains a "service-layout" element.  To use this include the [ADD IN LINK TO UI NAMESPACE] namespace in your service configuration.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<catcfg:Configuration xmlns="http://www.fostermoore.com/schema/cat-ng"
                      xmlns:catcfg="http://www.fostermoore.com/schema/catcfg-ng"
                      xmlns:ui="http://www.fostermoore.com/schema/catalyst-ui/v1">
  <businessServices>
    <businessService displayGroup="default" formItem="home" code="home">
      <ui:service-layout namedLayout="home" />
    </businessService>
  </businessServices>
</catcfg:Configuration>

The service-layout tag has the following configurable attributes:

The Layout Template

The template for the Layout should be simple as all styling and structure should be coming from a component from the design system.  The Layout template should wrap all content in a cat-app component and optionally provide slots for the layout_content and layout_mainmenu.

<cat-app>
  <cat-service-layout :viewtree="viewtree" :changeOrgHandler="changeOrganisation">
    <slot name="layout_content"></slot>
    <slot name="layout_mainmenu" slot="mainmenu"></slot>
  </cat-service-layout>
</cat-app>

The gluelayout Mixin

When creating a new Layout use the "gluelayout" mixin to provide common service methods to child components.  This can either be done directly by adding the mixin to a custom .js file or by adding the layout ".vue" template into the "template/layout" directory.

Vue.component("${vueComponent}", {
  mixins: [gluelayout],
  template: "${vueTemplate}",
....
});

Any component using this mixin will provide a number of services required for child components to have access to the context. 

Properties

The following properties are passed into the component:

Slots

The layout will be passed 2 child components into 2 named slots.  

• layout_content: Will be passed a wrapped view tree component.
• layout_mainmenu: Will be passed a default menu implementation

<layout :viewtree="viewtree" :service="service" :menus="mainMenu" :user="user" :errors="errors" :flash="flash" :licence="licence">
  <template slot="layout_mainmenu">
    <mainmenu :menu="mainMenu"></mainmenu>
  </template>
  <content-wrapper slot="layout_content" :viewtree="viewtree">
    <viewtree :viewtree="viewtree"></viewtree>
  </content-wrapper>
</layout>

If a named layout is being used the layout tag will be replaced with the specific layout.  If the layout being used does not have either of the named slots then they will be ignored. 

Services

The layout is more than just an HTML wrapper for the form.  It also exposes services that can be injected into child components.