Creating and Using Links

There is an easy way to have sortable navigations generated automatically. See the Scrivito.ChildListTag documentation for details, or the tutorial on Building a Child Navigation Widget.

Link and linklist attributes

Scrivito has two attribute types for maintaining links, link and linklist. link is intended for maintaining single links, while linklist lets you create and maintain "see also" link lists, i.e. classical "related links" pointing to pages recommended for further reading.

Note that references to CMS-internal objects, be it pages, images or the like, can be maintained more efficiently using attributes of the reference and referencelist types since they're not packed with mechanisms for handling URLs.

For dealing with the contents of a link attribute or an element of a linklist, Scrivito provides the Link class whose instances have the following attributes:

Attribute nameGetterReturns Type/ClassPurpose
hashhash()StringURL part referencing an anchor on the destination page (#hash)
objobj()ObjFor an internal link, the CMS object it points to (link destination)
objIdobjId()StringFor an internal link, the ID of the destination CMS object
queryquery()StringThe URL part specifying the parameters (?lang=en)
relrel()String New in 1.4.0The rel tag attribute of the link specifying its meaning, e.g. “next” or “search”
targettarget()StringName of the window in which the link destination should be opened
titletitle()StringFor rendering the “title” tag attribute of the link (link description)
urlurl()StringThe URL an external link points to

Note that url and obj are mutually exclusive. In addition to its attributes, a Link instance has two boolean methods for checking whether it's an external or internal link, isExternal and isInternal, respectively.

Usage examples

Copy
// Create a Link with the given attributes
const myLink = new Scrivito.Link({ url: "http://example.org", title: "Example" })

// Copy this link, changing or adding some attribute values
const myLink2 = myLink.copy({ query: "login" })

// Create a Link pointing to the root object
const myLink3 = new Scrivito.Link({ obj: Scrivito.Obj.root(), title: "Home" })
Copy
// Get the destination CMS object of an internal link.
// Throws NotLoadedError if the destination object has not yet been cached.

const dest = myLink3.obj()
Copy
// Render the headerImage attribute of the current page and link it to the root page

<Scrivito.LinkTag to={ Scrivito.Obj.root() }>
  <Scrivito.ImageTag content={ Scrivito.currentPage() } attribute="headerImage" />
</Scrivito.LinkTag>

If you are in need of an example of how to use Link objects, the Example App includes a “LinkContainerWidget” and a “LinkWidget” you could use and adapt as required.