Guides

Developer use cases

Learn actions you can take to work with project maps.

The following example demonstrates how to list all compositions that are in a published state using the project map client (there some exceptions).

In this particular example Uniform uses Dynamic Catch All Routes from Next.js that allows us to render all pages in single place, from Home page, to deep multilevel pages.

By using the link parameter on components, editors can set links to other nodes. This ensures valid URLs even when the linked node is moved to another location within the project map. How these links are rendered in the frontend application is up to the developer to decide and implement: Here is an example of a custom InternalLink component that demonstrates how to render an internal link with the Link parameter using the Next.js Link component

Usually sitemap generation is your web framework task (also more reliable because of dynamic pages exceptions). But you can use Project Map API directly to fetch whole tree (tree or flat structure) data to construct it your self.

The tree-like hierarchical structure of nodes in a project map make it easy to render navigational components using the project map client. Example use cases for navigation could be:

  • Global navigation: Use project maps to render a main navigation or footer navigation
  • Local navigation: Show links to sibling or child nodes of a specific node.
  • Breadcrumb navigation: Show the trail of parent nodes of a specific node (such as Home > Company > About us).

note

Advanced or custom navigation: If you need more control on how to structure, display or enrich your navigation with content or personalize links then we recommend creating custom Canvas components that represent your navigation UI. This give you a high level of flexibility as you can leverage all Canvas capabilities. Use link parameters in your components to connect your links with the project map.

Coming soon

Code examples coming soon.

In a case like a commerce site, you may have thousands of links where some sort of identifier is used in the URL to determine the content to display. Products may be added and removed constantly. It's not practical or realistic to create a project map node for each possible URL. In addition, the composition used for these URLs may be virtually identical, with the only difference being the data displayed in the components. Again, it's neither practical nor realistic to create a composition for each possible URL. In cases like this you can use a "dynamic routing" approach similar static site generators like Next.js and Vue work.

info

In the future, Uniform's project map will provide support for dynamic routing as a native feature. Stay tuned for details.

  1. In your project map, add a project map node that represents the dynamic part of the URL.
screenshot of adding a node

tip

The node name isn't significant, but the path segment value is because it's the value your front-end application will use to determine which content to retrieve.

  1. In your front-end application, retrieve the composition:
  1. Your front-end application is responsible for determining the value of the path segment (such as product-id) in order to retrieve the appropriate data from the relevant content sources.

The project map ID is used when fetching data using the Uniform API.

  1. In Uniform, navigate to Settings > Canvas Settings.
  2. Scroll to the section Add Project Map.
  3. The ID for each project map is displayed.

You can filter your results by composition state.

State IDPublish state
0draft
64published

note

Filtering by state 0 will always result in the full data being returned in either tree or list format.

This will return a list of nodes:

You will receive all nodes in published state as well as all placeholder nodes in an array.

This will return a tree of published composition nodes:

You will receive a tree structure of all nodes that don't represent a composition in draft state.

note

All children nodes of a composition node in draft state will be omitted from the results.