Marketplace portlet
The marketplace portlet is a new way for users to find content faster and easier. Presented similarly to mobile app stores, users can search, review, and see more about an portlet than ever before.
This can be used in conjunction with the gallery/customize drawer or can serve as a replacement.
Screenshots of this portlet in action!
Initial View:
Clicking on the Title takes you straight to the portlet. Clicking on details takes you to the entry page.
How to have portlet participate in entry page?
By Default, every app will have an entry page. Check out these default entry pages...
Now take a look at a more robust entry page:
How to add screenshots
Add some screen shots in this format screen_shotx and corresponding captions as screen_shotx_caption.
Order doesn't matter, as shown below. Captions are also optional.
<portlet-preference> <name>screen_shot2_caption</name> <readOnly>true</readOnly> <value>One Stop Shopping</value> </portlet-preference> <portlet-preference> <name>screen_shot1</name> <readOnly>true</readOnly> <value>http://image.shutterstock.com/display_pic_with_logo/427597/141533524/stock-photo-marketplace-road-sign-141533524.jpg</value> </portlet-preference> <portlet-preference> <name>screen_shot1_caption</name> <readOnly>true</readOnly> <value>The really cool marketplace</value> </portlet-preference> <portlet-preference> <name>screen_shot2</name> <readOnly>true</readOnly> <value>http://thumb7.shutterstock.com/display_pic_with_logo/248635/135897425/stock-photo-a-vending-machine-with-the-words-buy-apps-here-and-many-app-tiles-and-icons-ready-to-be-bought-and-135897425.jpg</value> </portlet-preference>
How to add versioning
Release notes is completely optional. Not having these preferences will keep uPortal behaving the same as pre-marketplace.
Version History is added via portlet preferences in your portlet entity file. See example values below.
<portlet-preference>
<name>Release_Date</name>
<readOnly>true</readOnly>
<value>Feb 5, 2014</value>
</portlet-preference>
<portlet-preference>
<name>Release_Notes</name>
<readOnly>true</readOnly>
<value>Responsive Design!</value>
<value>Doesn't Break</value>
<value>Adds the ability to have Screenshots</value>
<value>Adds the ability for version notes</value>
<value>Search works</value>
<value>See your favorite apps</value>
</portlet-preference>
Release Date is optional. Release date is a Joda Time DateTime field. The value of it should be "dd-MM-yyyy HH:mm:ss".
Release Notes is optional and also can be of any length. After 3 notes, the front end will not show until the more button is clicked on the entry page. When clicked, all notes will be shown and the link will change text to 'Less'. When clicked, this will once again hide the extra notes, and the text will once again display 'More'. If any value is blank, a blank line with a dash will appear.
How to add Related Apps?
The entry page will show related portlets. A related app is an app that belongs to the same category or is in a sub category of a given app. The related app section only appears when there are any related apps (ie, no empty list will ever appear) and the list is limited to five (configurable via a java field). The list of portlets shown is randomized, so it gives a little bit more life to the entry page.
How to limit what users can see in the initial view?
There are two portlet preferences that help.
<portlet-preference>
<name>showAllPortlets</name>
<readOnly>true</readOnly>
<value>true</value>
</portlet-preference>
<portlet-preference>
<name>showManagedPortlets</name>
<readOnly>true</readOnly>
<value>true</value>
</portlet-preference>
The showAllPortlets preference is false by default. This preference allows the marketplace to show all portlets regardless of permission to subscribe/manage. If set to false or the preference is not included, it will default to show only the portlets that you have permission to subscribe to.
The showManagedPortlets is true by default. This preference will add to the displayed set, portlets that a user can manage. Note, that if showAllPortlets is true, the showAllPortlets set will already include any managed portlets.
Categories
Listed on every portlet's entry page is a list of categories that a portlet belongs too. Clicking any of the categories will send the user back to the initial landing page with the category clicked in the filter.
Categories are also available for viewing on the initial landing page. Clicking the category button will display all the categories that have portlets the user can view in the marketplace. Because uPortal ships with a 'ALL CATEGORIES' category, there is a portlet preference that can be set to hide this 'root' category. The default is to not show the 'root' category, so if this preference is not here, it won't show. Here is the portlet preference example, where showing the root category will not be displayed:
<portlet-preference> <name>showRootCategory</name> <readOnly>true</readOnly> <value>false</value> </portlet-preference>
Here is a screenshot showing the categories displayed on the landing page, after the category button is clicked:
Screenshot after the Entertainment category is clicked. Notice the filtering!
Ratings!
Ratings are shown to the user on the entry page of a portlet. User can select 1-5.
Also, every portlet can be rated via the options menu! 1 rating per person per fname is allowed. When the rating star system is displayed, it shows what the user had previously rated. Of course, a user can always update their ratings and the appropriate places are updated.
Rating also includes a text review component. At this current time the only reviews you can see are your own.
The submit button submits both the rating and the review without page refreshing! The submit button is disabled until the user gives a star rating. The text component is optional. There is a character remaining label to let the user know that only reviews up to 160 characters are allowed. The text turns red when the characters get under 10 remaining. The max length of reviews is configurable in this code block
Go Button!
The go button will send the user to the portlet, a very nice way to use the portlet.
Link Modal
The long link is auto generated. The short link is a portlet preference.
<portlet-preference>
<name>short_link</name>
<readOnly>true</readOnly>
<value>http://goo.gl/ALBYpJ</value>
</portlet-preference>
First Epic Completed
Where is the code so far?
https://github.com/Jasig/uPortal/tree/marketplace
Who is interested in this work?
The University of Wisconsin is currently in a redesign and is working towards the mockups pictured above.