Feather: Document selector

The Feather document selector enables you to display and retrieve a specific documents.

Using the document selector, you can:

• Select and deselect documents
  
• Upload documents by either selecting them from a list, or using drag and drop
• Search for documents in the currently opened library or in all libraries
• Select the provider from which to retrieve documents
• Filter documents by Libraries, Categories, Tags, or Dates
• Sort documents by Title, Date created, or Date modified

NOTE: You can change the document selector's behavior by editing the widget properties in the Advanced settings section.

The documents you select are kept in a scope array variable. The default template visualizes documents using the sfCollection directive. For more information, see Feather: Use a generic collection directive.

You can use the document selector in the frontend, as well as in the backend. For example, on a page, as well as in a widget designer. For more information, see Feather: Use content selectors outside of widget designer views.

The sfDocumentSelector is a directive with an isolated scope that is defined in a module with the same name: sfDocumentSelector.

The following image is an example of an document selector:

Document selector attributes

The sfDocumentSelector directive exposes the following attributes:

Add the document selector directive

The following example demonstrates how to add a document selector directive in a widget designer's view.

To enable AngularJS to link the sfDocumentSelector directive in your custom designer view, you must load the script of the directive and add a dependency to the module:

1. Feather automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Feather sets your designer view priority 1. In case you need to have full control over the scripts that are loaded or you want to set custom priority, you can alternatively create your own DesignerView.YourView.json file. If you have a JSON file that matches the convention (even if empty), this automatic scripts registration will not occur. In your DesignerView.<YourView>.json file, add a scripts array. As a result, the file content should be similar to the following:
2. Feather automatically finds all AngularJS modules you rely on and references the widget designer to them. In case you rely on custom AngularJS modules or have logic that needs an AngularJS controller, you can create your own designerview-<yourview>.js file. If you have a .js file that matches the convention (even if empty), this automatic modules referencing will not occur. In your designerview-<yourview>.js file, place the following code snippet:

   The code above displays all documents and enables you to select and deselect any of them because both the sf-deselectable and sf-multiselect attributes are present. The values of the selected documents are kept in the selectedItems array.

3. In your DesignerView.<YourView>.cshtml file, place the following tag where you want to render the sfDocumentSelector directive:

To provide notification when an document is uploaded, the sfDocumentSelector directive emits a custom selection event. To subscribe to the selection event, see the code sample in Step 2 above.