Resource Index Screens

A resource can show multiple "screens" on its index page. For example, you could have a table screen, a kanban screen, a calendar screen, etc. By default, a resource only shows the Table screen.

If you have multiple screens, the user will be able to switch between them in the top right.

Registering screens

To define your own screens, you can override the following method in your resource class:

public function indexScreens(): array
{
    return [
        new ResourceDefaultTableScreen($this), // Default table
        new TestScreen1($this),
        new TestScreen2($this)
    ];
}

Defining a screen

A screen class should extend ResourceScreen:

use Qore\System\Resource\ResourceScreen;

class TestScreen1 extends ResourceScreen
{
    public function component(): string
    {
        return 'TestScreen1';
    }

    public function name(): string
    {
        return 'test_screen_1';
    }

    public function icon(): string
    {
        return MaterialIcons::CHECKCIRCLE->value;
    }

    public function label(): string
    {
        return 'Test Screen 1';
    }
}

Front-end

As you can see in the component() method, you need to create a front-end component for your screen:

<template>
  <div>
      <div>My screen</div>
  </div>
</template>

<script>
export default {
  props: {
    resource: {
      type: Object,
      required: true
    },
    screen: {
      type: Object,
      required: true
    }
  }
}
</script>

Then finally, register your component globally

Vue.component('TestScreen1', () => import('path/to/TestScreen1'))

Configuration

In your screen class you can provide the front-end with extra metadata:

public function jsonSerialize(): array
{
    return array_merge([
        'some_extra_data' => 'value'
    ], parent::jsonSerialize());
}

You also have access to the resource instance via $this->resource.