Page Blueprint Issues | Fields/Tabs not showing up

Support Forms & Blueprints
,
1

Hello, I’m new to Grav. I’m trying to created a new tab to add disclosures to the page. The pages I’m creating are different events that require their own custom disclosures and not just the same info.

I’ve created a template for Event pages in my custom theme (event.html.twig). I created a blueprints folder within my custom theme and created an event.yaml blueprint.

Here is my Blueprint code. Am I missing something. I’ve cleared the cache. I’ve even copied code from the Antimatter theme but nothing changes.

title: Disclosures
    '@extends':
    	type: default
    form:
    	fields:
    		tabs:
    		type: tabs
          	active: 1
    			fields:
    				content:
    					type: tab
    					title: Disclosure
    					fields:
    						header.disclosure:
    							name: disclosure
    							type: list
    							style: vertical
    							label: Disclosures
    							fields:
    								.title:
    									type: text
    									label: Title
    								.content:
    									type: textarea
    									label: Disclosure
2

Hi
It may be that line 7 should be “tab” not “tabs”. Also I don’t know if its copy/paste into the forum but you should only have 2 spaces for your indents, this looks more like tabs which would kill it.
so like:
title: ‘Price List’
’@extends’:
type: default

form:
  fields:
    tabs:
      fields:
        tabs:
          type: tab
          title: 'Disclosure'
          fields:

etc
Normally just switching between “Normal” and “Expert” will be enough to refresh the page to show any changes.

3

Thanks for the quick feedback.

I reformatted my code with your suggestions @csixtyfour …removed the tabs and just did two spaces…still no cigar though. It’s just weird because even creating a blueprint via devtools doesn’t result in any changes in the admin.

title: Disclosures
  '@extends':
    type: default
    form:
      fields:
        tabs:
        type: tab
        active: 1
    	  fields:
    	    content:
			  type: tab
			  title: Disclosure
    		    fields:
				  header.disclosure:
				    name: disclosure
					type: list
					style: vertical
					label: Disclosures
					fields:
					  .title:
				        type: text
						label: Title
					  .content:
						type: textarea
						label: Disclosure
4

Spaces are key as mentioned. Also the title and form need to be on the same column. And there are a few indents you are missing, which is super important to get right with a blueprint file. Check this out:

form:
  fields:
    tabs:
      type: tab
      active: 1
      fields:
        disclosure:
          type: tab
          title: Disclosure
          fields:
            header.disclosure:
              name: disclosure
              type: list
              style: vertical
              label: Disclosures
              fields:
                .title:
                  type: text
                  label: Title
                .content:
                  type: textarea
                  label: Disclosure

Because '@extends' is a child of title, you want to reset your indentation for form. Also you want to make sure you keep all properties of an item on the same column and only indent for child items. Hope that makes sense. Let me know if that works for you!

5

I was about to replyu too, but looks like @apotropaic got it right, except for the line 4 that should be plural iirc.

So:

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        disclosure:
          type: tab
          title: Disclosure
          fields:
            header.disclosure:
              name: disclosure
              type: list
              style: vertical
              label: Disclosures
              fields:
                .title:
                  type: text
                  label: Title
                .content:
                  type: textarea
                  label: Disclosure
6

Yep, I missed that one! Great find @paul

7

Omg you guys are awesome and yes I was able to get the tabs to display now. Apparently my text editor kept converting my indents to tabs instead of spaces. A quick change in my editors preferences helped. Also checked my yaml against an online validator to make sure there wasn’t any simple errors like tabs. I really appreciate all of the help.

8

This may be a dumb question, but can you have more than one custom Tab? I have the Disclosure tab showing as intended but if I wanted to add say a Features tab as well, is that possible? Or do I have to work within that one custom tab?

I’ve tried this but it doesn’t output an Accordion Tab

title: Disclosures
'@extends':
    type: default
    context: blueprints://pages
form:
  fields:
    tabs:
      type: tabs
      active: 1
      
      fields:
        disclosure:
          type: tab
          title: Event Disclosure
          
          fields:
            header.disclosure:
                type: editor
                label: Disclosure
            
            
      fields:
        accordion:
          type: tab
          title: Tab Accordion
          
          fields:
            header.accordion:
                type: editor
                label: Overview
9

You just had an extra fields: This shoud work:

title: Disclosures
'@extends':
    type: default
    context: blueprints://pages
form:
  fields:
    tabs:
      type: tabs
      active: 1
      
      fields:
        disclosure:
          type: tab
          title: Event Disclosure
          
          fields:
            header.disclosure:
                type: editor
                label: Disclosure
            
        accordion:
          type: tab
          title: Tab Accordion
          
          fields:
            header.accordion:
                type: editor
                label: Overview
10

Ah, thanks. I think I have a better understanding now @paul . :+1:

1 Like