- Web Development
- 09.22.2022
Flexible Package Released Today
Today we released our internally built "Flexible Links" data type to the public. It is a control we use to control sets of links and fills a similar niche to umbraco's build in Multi Url Picker. Why didn't we just that control one might ask? Well, to explain that, I'll go on a short trip down memory lane.
Origins
We originally used umbraco's Related Links data type in our early umbraco 7 builds, which is the predecessor to the current Multi Url Picker control. It worked great at the time, but we eventually ran into a problem. We needed to be able to create modal/popup links from this control. While technically possible by using content nodes to control the modals, it didn't make for the best user experience, as users would have to drill down through the content tree every time they want to add a modal. And so the first iteration of Flexible Links was born. Since then, we have used this data type on every website we have built, gradually expanding on it's capabilities.
At first it was fixing oversights in the original implementation. The first version didn't have an option to select media, as it was used mostly for controlling navigation at first, which usually doesn't link to media for example. Later on, umbraco 8 came out and introduced it's infinite editing capabilities, so we moved type selection into another panel and added controls to access data about the selected content/media when available. Later on, we encountered a need for new types of links and so we generalized the data type so that new types of links could be added via an umbraco collection instead of forcing us to tinker with the angular bits. And last of all, we updated all of the back end code to make the data type compatible with umbraco 10 and that is the version released today. Below you can see what the first version of this data type looked like versus what it looks like now.
Looks a bit different right? But enough about that.
How Do I Set it Up?
The first step is to install the Bonsai.FlexibleLinks.Backoffice nuget package. This adds a new "Bonsai: Flexible Links" data type to the umbraco backoffice. Out of the box, the "Flexible Links" data type supports 4 kinds of links.
- Anchor - Used to create hash based links like "#example" to link to sections of the current page.
- Content - Used to select content from umbraco content section.
- Media - Used to select media from umbraco media section.
- External - Used to manually enter urls
A developer can also add additional types (see the github repository for documentation of this process). Now let's talk about how to configure the data type. Below is a screenshot of what this looks like, along with an explanation of each of the configuration options.
- Allow Multiple - When active, this will allow multiple links to be selected.
- Disable Labels - This removes the label piece of the control. This is useful for when the links are images or icons rather than text.
- Pickers - This is a list of all the pickers that have been installed. By default they are disabled. When a picker is enabled, it will also reveal any settings configured in the Settings property of the picker, as shown below.
And that's all there is to it for the configuration. Add it do a doc type and the editors can start taking advantage of it. Which brings us to the final part of this post.
How Do I Use It?
1. Click the "+" button to add a new link. This will bring up a panel to select the type of link to add.
2. Select a type from that panel. If the type uses a picker, it will bring up a content/media picker to select the content to link to. If the control allows multiple links, more than one link can be selected.
3. Update the label (and the url if the type is manually entered). By default the label will be set to the name of the selected content, but it can be edited to be whatever is needed.
4. Enter any other information.
- Hash text or query strings
- Open in new tab?
There are also a couple other controls for changing the content it links to.
- The information icon will open the selected content in a panel to directly edit that content. This is mostly used for the built in content and media pickers.
- The pencil icon will open the picker again to change what content to change the content it's linked to.
And that's all there is to it.