Olobase - Docs - Olobase UI

« Back to Menu

Admin
List
Show
Form
Messages

Show

The Show page is used to display all the details of a particular resource item using the getOne data provider method. Olobase Admin uses the resource feature and simplifies software development by providing a standard layout as well as many field components. Since the Show page is a standard view page component, there is no real limit to how you can present any advanced detail view you can imagine within this page.

Show Layout

VaShowLayout is the page layout created to display resource details. It is the best place to use any Olobase Admin fields when heavy use is required.

Mixins

Resource

Properties

Property	Type	Description
title	`string`	Optional h1 heading to the left of the header.
disableCard	`boolean`	Closes/opens v-card wrapper.

Slots

Name	Description
default	Placeholder for page content.

Row Show

If your detail data in the list is not very detailed and you want these details to be displayed quickly, you can use the feature called row-show.

Row Show

<template>
  <va-list
    disable-create
    :filters="filters"
    :fields="fields"
    :items-per-page="10"
  >
    <va-data-table-server
      row-show
      disable-clone
      disable-show
    >
    </va-data-table-server>
  </va-list>
</template>

oloma-demo-ui/src/resources/Employees/RowShow.vue

<template>
  <va-show-layout
    :title="title"
    disable-card
  >
    <va-show :item="item">
      <v-row justify="center">
        <v-col>
          <v-table density="compact" class="va-row-show-table">
            <tbody>
              <tr>
                <td><b>{{ $t('resources.employees.fields.companyId') }}</b></td>
                <td>
                  <va-field class="sm-field" source="companyId"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.employeeNumber') }}</b></td>
                <td>
                  <va-field class="sm-field" source="employeeNumber"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.jobTitleId') }}</b></td>
                <td>
                  <va-field class="sm-field" source="jobTitleId"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.name') }}</b></td>
                <td>
                  <va-field class="sm-field" source="name"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.surname') }}</b></td>
                <td>
                  <va-field class="sm-field" source="surname"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.gradeId') }}</b></td>
                <td>
                  <va-field class="sm-field" source="gradeId"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.employmentStartDate') }}</b></td>
                <td>
                  <va-field class="sm-field" source="employmentStartDate"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.employmentEndDate') }}</b></td>
                <td>
                  <va-field class="sm-field" source="employmentEndDate"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.createdAt') }}</b></td>
                <td>
                  <va-field class="sm-field" source="createdAt"></va-field>
                </td>
              </tr>
            </tbody>
          </v-table>
        </v-col>
      </v-row>
    </va-show>
  </va-show-layout>
</template>

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

Tabbed layout

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

Show Layout

<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 field.

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

Properties

Property	Type	Description
item	`object`	The element resource object where all properties must be added to Olobase Admin layouts.

Slots

Name	Description
default	All content is rendered with all internal fields. The element is recorded in each field.

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

Field Wrapper

Wrapper component for domain supporting tag localization and supported Olobase Admin layout, mainly used for detail page. Use the default slot for special needs or use the type attribute for quick use of the currently available Olobase Admin component. All other attributes of this component will be combined with the subslot.

Mixins

Resource

Properties

Property	Type	Description
source	`string`	The property of the resource to fetch the value to display. Supports dot representation for hierarchical object.
item	`null`	Overrides the default element added by VaShow.
label	`string`	Overrides the default tag behavior. The default is to get the localized Vue I18n tag from both source and source.
labelKey	`string`	Overrides the default source key as the translated label.
type	`string`	The type of field to use. Not used if you are using the default slot for advanced special needs.

Slots

Name	Description
default	Field slot. By default it uses the field component based on `type` attributes with all other attributes combined.

If a default slot is not provided, VaField will automatically use a specific Va field component under the hood based on the property type.

Code below:

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field source="type" type="select" chip></va-field>
    </va-show>
  </va-show-layout>
</template>

It is exactly equivalent to this code:

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field source="type">
        <va-select-field source="type" chip></va-select-field>
      </va-field>
    </va-show>
  </va-show-layout>
</template>

Or:

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field source="type" v-slot="{ item }">
        <va-select-field source="type" :item="item" chip></va-select-field>
      </va-field>
    </va-show>
  </va-show-layout>
</template>

You can use this component only for the label and product value provider and do your own customization. Just use the default slot provider which will give you the value and exact item.

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field
        source="address"
        :label="$t('address')"
        v-slot="{ value }"
      >
        {{ value.street }}, {{ value.postcode }} {{ value.city }}
      </va-field>
    </va-show>
  </va-show-layout>
</template>

Field Components

To see all supported components for view data, go to fields. If none of them meet your needs, you can also create your own field component.