Skip to main content

Empty

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Empty condition is necessary whenever there is no data present on any part of any page, at that time empty message is displayed to give necessary information about page’s current state. It can be enabled by giving any condition. This contain a message/title and button which can be redirected to any page of the application.

QG21



Setup

To display empty screen message we need to use <fdk-empty-state> action component, which can be triggered on any condition and we can pass various props inside it to use its functionality, to use this action component we can use the following code:

theme/templates/components/empty-state.vue
<fdk-empty-state :title="'No items found'"
:button="{text: '', link: ''}">
</fdk-empty-state>

Props

We can pass following props inside the <fdk-empty-state> action component:

KeyTypeDescription
titlestringthe message which will be displayed on empty screen
buttonobjectthis contains button text for displaying on button and the link on which the button will redirect to

Was this section helpful?