Developer use cases

Learn actions you can take to work with project maps.

Get all pages from project map#

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.

Render links for link parameters#

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

Generate sitemap.xml#

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.

Generate navigation from project map#

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).

Dynamic pages#

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.

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

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.

Get project map ID#

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.

Filter nodes by composition state#

You can filter your results by composition state.

Query for published compositions#

List#

This will return a list of nodes:

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

Tree#

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.