Home

Prototype UI challenge questions

Customization Capabilities

A new DSpace UI should allow for the following common UI customization options. Based on your prototype, please either show an example of how these may be achieved in this UI platform or describe them via documentation.

Show or describe how an administrator would be able to easily adjust the site wide theme layout based on local design/needs. Specifically, show or describe how the following changes might be achieved:

1. How would someone change the colors, fonts, sizes of the site? (e.g. css changes)

• See the theming section on README.md

2. How would someone modify the sitewide header/footer? (e.g. to change logo, title, etc)

• override dsember-core's version of the template in the dsember app:
  • In the dsember directory, run the ember generator to generate the appropriate template:
    • e.g. for the header: ember g template partials/-header
  • Copy the contents from the dsember-core version, and edit as needed.

3. How would someone adjust the navigation bar to appear on left or right?

• override dsember-core's application template in the dsember app and change row-offcanvas-left in to row-offcanvas-right
• something like this can of course be made configurable in environment.js if this prototype goes in to production.

4. How would someone change the location of the breadcrumb trail (e.g. from header to footer)?

• override dsember-core's application template in the dsember app and move the {{bread-crumb-trail}} component to its desired position

5. How would someone display additional metadata fields on the Item view page? For example, displaying “dc.publisher” on the default Item view site wide?

• In the dsember app, create a new compontent, that extends dsember-core's FieldValueSectionComponent, and set ['dc.publisher'] as the value for the fields property, similar to the date-section component for example.
  • ember g component items/simple/publisher-section
  • note that this will also create a handlebars file for the new component, but that can safely be discarded if the way the dc.publisher section is rendered on the item page doesn't need to differ from the other sections.

6. How would someone add new links or an entire section to the navigation menu (e.g. links to other university pages)?

• In the dsember app, extend the application controller with a version that adds an extra SidebarSection object to the sidebarSections array.
• For an example see the following gist.
• Note that you can call this._super() in a computed property to get the result of the computed property you're extending, in this case the sidebarSections that were already present in the parent version.
• You can add any type of component to the sidebar. The default is simple-section, the component that renders the menu's you see in the sidebar, but you can set the componentName property of the SidebarSection object to something else. That way you can for instance add a social sharing widget to the sidebar, without having to modify the sidebar's template.
• To make the process of adding extra sections more convenient I was thinking of creating a SidebarService that would allow you to add sections from anywhere in the app or addons, but I didn't have the time to put this in to practice.
• Of course, for the use case of static links at the bottom of the menu, a less technically-minded DSpace admin could also override the sidebar template and plunk down some html underneath the {{each}} loop.

Modularization Capabilities

A new DSpace UI should allow for / support common modularization needs. Based on your prototype, please describe (via documentation) how you feel this UI platform may (or may not) be able to achieve the modularization examples below:

How could this UI platform support optional modules/features?

a. For example, Embargo is an existing optional feature within DSpace. While it is disabled by default, many sites choose to enable it.

b. Enabling Embargo functionality requires additional metadata fields to be captured in the deposit form (e.g. embargo date, embargo reason).

c. Does this UI framework support the idea of easily enabling (or disabling) features that require UI-level changes? In other words, in this framework, do you feel enabling Embargo functionality could be automated via a configuration (e.g. embargo.enabled=true)? Or would it require manual editing of the deposit form to add additional metadata fields?

The embargo feature would be released as a separate addon, that depends on dspace-core. It could add new features, or modify existing ones. For example to show a lock icon when a bitstream is embargoed, it could reopen the bitstream model, to add e.g. an isUnderEmbargo property, and it could extend the components that render bitstreams and modify them to show a lock if isUnderEmbargo is true

Bear in mind that actually enforcing the embargo should still happen server side, the UI addon would simply ensure that the user knows they can't access the file without having to click it first.

For the same reason those extra submission form fields wouldn't need to be present in the ember addon. The submission steps used, and the fields within them should be determined server side. The UI should simply render whatever steps/fields the server returns.

Enabling or disabling an addon can happen from the command-line, e.g.: ember install dsember-embargo Alternatively, because addons are NPM modules, they could also be added to/removed from the dsember app's package.json file

How could this UI platform support new extensions/add-ons?

 a. Assume that someone has created a new Streaming feature for DSpace which provides a streaming capability for Video/Audio content. How might this UI platform support overriding/overlaying the default Item View to make that streaming feature available?

That would also be an ember addon. In the addon you'd create a new ember component for the video player, and then you could override the simple item view template, to render that component in the right spot.

Instead of overriding the item view template inside the addon, you could also create a generator that will automatically execute when the addon is installed. (this only happens when you use the ember install command, if you manually add the addon to package.json, you'll also need to execute the generator manually as well) That generator could copy dsember-core's simple item view template to the dsember app, if that hasn't happened already and then add the player component to the local version.

Prototype Documentation

Each prototype MUST be submitted with the following documentation. Some of this documentation includes brainstorms on how you feel this prototype or UI platform might be extended to support more advanced UI features. Please base your answers on what you know (or have learned) about this UI platform during the prototyping process.

1. Describe the design of the prototype (e.g. technologies/platforms used, including version of DSpace, etc.)?

See the introduction section of README.md

2. How do you install the prototype on a new system? (Note: we will be testing the installation of prototypes in order to evaluate the installation of the platform itself)

See the installation section of README.md

3. How would you envision i18n (internationalization) support could be added to this UI prototype/platform in the future?

See the i18n section of README.md

4. How would you envision theming capabilities could be added to this UI prototype/platform in the future? In other words, how might local or third-party themes be installed or managed? Think of a theme as a collection of styles, fonts, logo, and page overrides.

See the theming section of README.md

5. How would you envision supporting common DSpace authentication mechanisms (e.g. LDAP, Shibboleth) in this UI prototype/platform in the future?

See the authentication section of README.md

Prototype Scope

7. Edit/Create Item: The prototype should offer a basic capability to edit or create items via a simple web form. (Please no submission workflows as that is out of scope!) A single page form can serve both edit and create purposes. Not all metadata fields need be included, we are just looking for a simple example of a web form, including the ability to upload a file.

As the REST API currently doesn't support creating new bitstreams, files can only be uploaded to replace an existing bitstream in the prototype. You can do so on the edit bitstream page, when logged in as an administrator

Edit (08/12/2015): I've since discovered that there is a way to create new Bitstreams using the REST API:

POST /items/{item id}/bitstreams - Add a bitstream to the specified item.

When I was making the prototype I missed it, as I was looking for the word 'create' in the docs or a bitstreams/new endpoint.