The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
In Sitefinity 7.0 we can select media content through the new Related Media field and choose the content we want to relate to the item. However, there are use-case scenarios in which we want to select all media items in a certain folder or album without going through each of the items. We would also like to select directly an entire album and its child folders, from which to retrieve all images, for instance.
Consider the following – We want to implement an Image Carousel. The carousel will use a set of images. We want to use all images located in a specific album, as in the default Image Gallery widget. This way when a new image is uploaded to the album, or a current one is updated, it will be automatically used in our carousel.
In this blog post will be demonstrated how a library selector field control could be implemented and used in Sitefinity back-end, as well as, a simple field control showing how the already saved data from the Library selector could be used to retrieve all images in this album. We will be using the Library selector for Image Albums, however, it could be easily set to bind with Document and Files folders or Video Albums.
These are the main elements of the Library Selector field control template:
The FolderSelector is the main control, which is responsible for binding and handling the data, also for filtering. Here we have to set the WebServiceUrl which will be used to bind the folders tree. It is set to the Images Albums service, since we want to select from them. For Document and Files folder the WebServiceUrl should be set to ‘Sitefinity/Services/Content/DocumentLibraryService.svc/folders’ and for Videos folders to ‘/Sitefinity/Services/Content/VideoLibraryService.svc/folders’.
There is a simple button for opening the selector dialog. Another component is the LabelContainer which shows which folder is selected – its full path, as well as, a remove button – to clear the selection.
We have registered all controls we have to use in the client-side of the control in our LibrarySelector class. There is not anything special in its implementation. The class is documented and could be found in the LibrarySelector archive attached to the blog post, so we will not give it such attention here.
We initialize our dialog as well:
In _selectLibraryOpenClicked the selector is bound and opened, if we have already selected a value it is set to the selector:
When the dialog is closed, the doneClientSelection event is fired and the selection arguments are passed, which holds whether or not a library is selected. If it is, the selected item is retrieved and persisted:
The most important part is how the value will be persisted. It will be saved as a short string holding a JSON object with the library data. We construct it using the properties we have set in the _selectLibrary function:
Note that the properties will be null if no folder is selected.
When the value needs to be set, we use the stringified JSON to set the value:
We have managed to select the library we want and persist the selection – so far, so good. Now the saved value should be used to retrieve all data from the library we have selected. We will show this for images, since we use the LibrarySelector for Image Albums.
This is the model that will be used to serialize our data, so we could get the id of the selected folder:
Note that the properties should be nullable, since the values will be null if no library is selected.
Using the Id we retrieve all images and bind them to a repeater, the following way:
The full source of the field controls could be found here:
Nikola Zagorchev is a Tech Support Engineer at Telerik. He joined the Sitefinity Support team in March 2014.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.