Table of contents
Setting up friendly URLs for documents
In this article we will go over how friendly URLs for documents are set up and configured.
Why?
When you want to display a single document in VEVA, the URL will be something like this by default: /single-document?documentId=<GUID-of-document> where "single-document" is the alias of the page which is being used to display single documents. This URL format is known as a permalink and does have it's advantages. For one, it will never change. As long as this document exists, it will have the same ID in the system and this URL will therefore always point to this specific document. Assuming that the alias of the "single-document" page is not changed, of course.
Switching over to "friendly URLs" might be desirable. They are more friendly for the user, since the URL actually hints what is going to be displayed. The user might even be able to look at the URL and remember it. Then of course it's the SEO aspect, where the words in the URL can actually have an effect on search engine rankings. There are plenty of resources online about urls and SEO. There are some disadvantages though. The UID/alias of a document, which actually makes up the friendly URL, can be changed which means that the fiendly URL will also change, so it's not as permanent of an URL as the non-friendly version of the URL.
Friendly URLs for documents in VEVA are quite flexible and there are almost no limits to what they have to look like, as long as the document alias (or UID) is present in the URL. In this example we will be configuring a friendly URL for news articles and we would like the format of the URL to be: /article/<UID-of-article>
A concrete example could be /article/this-is-the-first-news-article-on-this-website
Prerequisities
In order to configure friendly URLs, you must have the Routing system installed on your website. Friendly URLs are "virtual/pseudo" URLs and as such, they have to be configured in the Routing system. To see if you have the Routing system module installed, simply click the VEVA logo up top and see of you have "Routing" listed as an option in the menu.
The Routing system in the VEVA module menu
The Routing system in the VEVA module menu
The document model also needs to be configured so UIDs are used, and preferably auto-generated based on the value of some other field. In the case of news articles, it would make sense to have it be auto-generated based on the value of the "Title" of each news article. Head over to the "Documents" system in VEVA, click your articles model and then click the "Design" button. Open the "Settings" tab and make sure to check "Show UID field" and then select which field in the model should be used as the "Title" field. This will ensure that the UID will be auto-generated as the user types into the "Title" field, but any characters which are invalid in URLs will be automatically stripped out and/or replaced with URL-friendly characters.
Showing the settings for the articles model, where UIDs have been enabled and a "title" field specified.
Showing the settings for the articles model, where UIDs have been enabled and a "title" field specified.
Configuring the route
Head into the Routing system in VEVA and hit the "Add Route +" button. If you want, you can create a folder in the tree and place place the new route in that folder, but that's optional. What we want to do is to create a route which will basically match any request which starts with /article/ - we will then grab the part which comes after the trailing slash and assume that's the UID of the document we want to display. We will then perform a server-side "redirect/transfer" over to the page we want to use to display single documents and pass the UID as a parameter to that page.
- To create a route which matches anything that starts with /article/, we use regular expressions. Set the path of the route to: /article/(.+)
- Select "The destination is a page on the current website"
- Select the appropriate page, by clicking "No page selected" and browsing to the page you want to use. If you haven't yet created a page, you can do that right from with-in the dialog which pops up.
- Set the "Additional URL parameters for the destination page" field to: ?modelname=Article&uid={0}
Just make sure that the value of the modelname parameter matches the name of the Document model which contains the articles in your setup. The {0} value of the uid parameter is a reference to the first match of the regular expression in the path field, namely the part which comes after "/articles/" in the route. - For the "Routing method", we want the URL in the browser to stay the same - we don't want the user to be visibly redirected to the non-friendly URL, therefore we select "Server-side route - Url in the browser stays the same"
- Lastly, make sure to check "This route is active" and also "This route uses regular expressions".
Showing how the route should be set up
Showing how the route should be set up
This concludes the route configuration. You have now created a route which should accept any URL which starts with /article/ and internally routes to the page you want to use to display single documents. To test it out, open a new browser window and access your website, and try adding /article/testing-123 to the URL. You should be presented with the page you chose to display single documents.
Configuring links to single documents
The next part is to configure the actual links which point to the single document page. I am going to assume you already have a document list component configured which is displaying a list of articles. Simply add a "Link" component to the document list component. Type in any caption, like "Read more" and under link type, select "Static link". In the URL, type in /article/
The part is a databinding syntax which will grab the UID of each document and place it in the URL.
Showing how the link component should be configured
Showing how the link component should be configured