Navigation Blueprints

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌

[jasonvarga]

This PR allows you to add blueprints to Navs.

Closesstatamic/ideas#175
Closesstatamic/ideas#318
Fixes#3758

Adding fields

Any fields in the blueprint will be shown in the existing stack pane.

Here I've added excerpt and icon fields.

The title and url fields will get automatically added. If you want to customize the display or instructions for either of them, you can just add them to your blueprint and it'll use what you provide.

Data for these additional fields will be stored in a data key on the tree branch.

# trees/navigation/links.yamltitle: Yahoourl: 'https://yahoo.com'data:
excerpt: Hereicon: here.jpg

Entries

Previously, when you had linked an entry, clicking the item in the tree would just jump straight to that entry's edit screen.

Now, you get the edit pane just like regular links. There's a link at the bottom of the pane to edit the actual entry.

If you add a field to the nav blueprint that also exists in that entry's blueprint, the field labels will get link icons. If you've used the multisite feature, it works the same way. You're essentially "localizing" those fields.

This video shows how it works.

• title and excerpt are in both the nav and entry blueprints, so they get the link icons.
• icon is only in the nav blueprint, so it doesn't.
• The values from the entry is shown in the field, and the link is closed and in sync.
• When you edit a field, the link breaks and the field is unsynced.
• You can revert to the value from the entry by clicking the icon.

nav-field-sync.mp4

Changes

• Nav tree branches will all get ids. They will be added automatically, though.
• Collection tree branches will not get ids. The entry keys will be the "id".
• [breaking] $page->id() will now return the id of the page, instead of the id of the entry.
• [breaking] A page {{ id }} will now return the id of the page, instead of the id of the entry.
• To get the ID of the entry of a page, you can do $page->reference() or $page->entry()->id(), or {{ entry_id }} in templates.
• $tree->page($id) is deprecated. Instead, use $tree->find($id), where $id is the id of the page, not entry.
• You can get a page by entry using $tree->findByEntry($entryId)
• [breaking] $tree->root() returns the whole branch array instead of just the entry.

Todos

• Ability to add a blueprint to a nav
  • Allow title and url fields to be manually added to a blueprint
• Link to edit blueprint in ... dropdown on nav show view.
• Link to edit blueprint when editing a nav (like when editing a form).
• Ability to add data to a branch
• Branch data merges over the top of the entry data
• Add blueprint fields to the edit page pane
• Add link to entry on edit page pane since now entries open in a pane
• Hook up adding a URL link
• Hook up adding an entry link
• Validation when submitting a nav page
  • Merge the title and url fields if they already exist in the blueprint
• Swap enter with cmd+s to save page editor pane
• Add "dirty" ux when you close a page editor that has edits
• Improve UX to show that page fields may override entry fields.
• Make sure fields are augmented in templates
• Support the custom nav fields in GraphQL
• FixGraphQL: query will fail with "Link to URL" nav items when title is blank #3758 probably using GraphQL PageType: Renullabelify non-nullables #3968
• Do the todos I've left throughout the code
• Write docs
• The things I didn't think about until it's about 95% done

[jackmcdade]

👌