Best way to fetch data in a custom block

The CMS Questions
1

Hi,

I am working on a custom-color-field and experimenting with fetching data from a settings page.

As far as I understand there are two ways to do this:

  1. fetching the entire page via the api in javascript
    methods: {
        async getColors() {
            let response = await this.$api.get('settings/colors');
            this.colors = response.content.section_block_colors
        },
    }
  1. Fetching the data with a custom route
'api' => [
    'routes' => function ($kirby) {
        return [
            [
                'pattern' => 'section-block-colors',
                'action'  => function () use ($kirby) {
                    return [
                        'colors' => $kirby->pages('settings/colors')->section_block_colors()
                    ];
                }
            ]
        ];
    }
],

Unfortunately i get an error when trying to access the color-field via ->section_block_colors() .
I only can pass the full page object.

Why can´t I pass the field-values?

In the cookbook-recipe »my first panel area« it is possible to pass data directly via a prop:

// https://getkirby.com/docs/cookbook/panel/first-panel-area#setting-up-the-php-part
'views' => [
    [
    'pattern' => 'moviereviews',
    'action'  => function () {
        // get movie reviews from API
        $reviews = [];
        $apikey  = 'your API key';
        $request = Remote::get('https://api.nytimes.com/svc/movies/v2/reviews/picks.json?api-key=' . $apikey);
        if ($request->code() === 200) {
            $reviews = $request->json(false)->results;
        }
        return [
            'component' => 'moviereviews',
            'props' => [
                'reviews' => $reviews,
                'size'    => 'small',
                'layout'  => 'cards',
            ],
        ];
    }
    ]
]

Is there a way to pass data to a block like this?

Which is the best way of doing this?

Best
Peter

2

What are you trying to get here? Is that a normal page? Then the api call is wrong, you have to use a + as separator for the page id, and the pages part is missing, the API documentation.

Example also here:Block factory: Creating your own blocks collection | Kirby CMS

3

Is it possible that your links are not working?

Yes it is a normal page with a structure-field where a set some colors.
I wrote it the ‘wrong’-way to simplify my general question(s), sorry!
i am getting it via:

methods: {
    async getColors() {
      if(!this.apiPath) return;
      let response = await this.$api.get(this.apiPath);
      this.colors = response.content.section_block_colors
    },...
computed: {
    apiPath: function() {
      if(!this.path) return;
      return 'pages/'+ this.path.replace('/', '+')
    },
...

In general I thought that php is used to get the data and then passed to vue, because it is faster.
Is this right, or should i use the js-api?

4

No, that works for areas but not for fields. Although I don’t really understand your context here, in your first post you say you are creating a custom field, in the headline and in your last post you write block…

5

sorry for the confusion.
i am using the field in my block to set the color of the block.