Layouts

Both create and edit layouts with show page containing specific contextual actions shares similar layout. There's nothing more to say about them since VaForm will do the actual work.

Create Layout

Page layout for data creation.

Mixins

• Resource

Properties

Slots

Cloning

Note that as soon as a specific resource query string with a valid existing ID exists, the render page supports copying (i.e. cloning) of values from other existing resources. This is done automatically via the VaCloneButton, which is available by default in VaDataTableServer. That's why the vue component Create has element support that allows you to inject it into VaForm.

<template>
  <va-create-layout>
    <va-form :item="item">
      <!-- Olobase Admin inputs component -->
    </va-form>
  </va-create-layout>
</template>

<script>
export default {
  props: ["item"],
};
</script>

Edit Layout

Page layout for data editing.

Mixins

• Resource

Properties

Slots

ID

Compared to page creation, there is a new id property on the API side that corresponds to the resource to be edited and added. Don't forget to put the id attribute on the form to use the data provider update method under the hood.

<template>
  <va-edit-layout>
    <va-form :id="id" :item="item">
      <!-- Olobase Admin inputs component -->
    </va-form>
  </va-edit-layout>
</template>

<script>
export default {
  props: ["id", "item"],
};
</script>

Tabbed layout

Since you have complete freedom over the layout, it is really easy to create a tabbed detail page using any vuetify or custom component. Check out the example below.

<template>
  <va-show-layout
    :showList="false"
    :showClone="false"
    :showEdit="false"
    :showDelete="false"
  >
    <va-show :item="item">
      <v-tabs v-model="tabs">
        <v-tab value="1">Tab 1</v-tab>
        <v-tab value="2">Tab 2</v-tab>
        <v-tab value="3">Tab 3</v-tab>
      </v-tabs>
      <v-window v-model="tabs">
        <v-window-item value="1">
          <v-card>
            <v-card-text>
              Tab content 1
            </v-card-text>
          </v-card>
        </v-window-item>
        <v-window-item value="2">
          <v-card>
            <v-card-text>
              Tab content 2
            </v-card-text>
          </v-card>
        </v-window-item>
        <v-window-item value="3">
          <v-card>
            <v-card-text>
              Tab content 3
            </v-card-text>
          </v-card>
        </v-window-item>
      </v-window>
    </va-show>
  </va-show-layout>
</template>

Injector

The following example shows the component injector that facilitates resource visualization using Olobase Admin component fields. Inject this element for each Olobase Admin fields.

<script>
export default {
  props: ["id", "item"],
}
</script>

Properties

Slots

As you might guess, VaShow's main role is to inject the full element resource object into each Olobase Admin space component, resulting in minimum standard code. The Olobase Admin field will then be able to capture the value of the resource property specified in the resource property.