48h - Asset Search UI Prototype

Project Overview

We currently have an Asset Library, which is a repository of reusable code components that we leverage for the delivery of cloud-based solutions for our consulting customers. It's a JQuery app that runs on AWS and accesses a database that's on Salesforce. Our users are exclusively in Salesforce, so the UI is iframed into a Visualforce page (and the users can access the data in Salesforce using the native Salesforce UI as well). The application is an "Asset Search", that's basically a custom search against the Asset object in Salesforce (see screenshot in forum).

We'd like to re-design the application so it has refreshed UI and more powerful search features.

Competition Task Overview

For this contest, we want to implement prototype pages as shown in the mockups.

Key Requirements

• Create the required pages as required below.
• Test in all the required browsers.
• Replicate the design of the provided storyboard for all pages. Note colors, spacing and font sizes are important.
• Your pages must match the colors and structure of the provided storyboards.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure you submission clear of HTML and CSS Validation error and warning.
• The provided documents has important notes about how the UI controls should work, make sure you implement these.

Detailed Requirements

We need to implement the following two pages:

• Asset search page
• Asset picker page (pop up)

Note for each page, we need two versions:

• one with paging controls as shown in the asset picker mockup
• one without paging controls as shown in the asset search mockup

If you find some icons are not in the PSDs or the icons zip archives, please use placeholders or cut icons out of the mockup and clearly document them in a readme.txt so we can easily replace them later.

Some notest that might be helpful:

The picker pop up will be invoked from a button in Salesforce, the popup will just iframe the same Angular code as the search results.

Here's the use case for where the picker would show up:
1. As a Salesforce user, you'd navigate to a Story record and click the New Asset Usage button on the Assets Used related list. Screenshot - http://www.screencast.com/t/iFyd1o7m
2. On the New Asset Usage form, when you click the lookup icon to pick an Asset, the system would show the new Picker UI as depicted in the mockup. Screenshot - http://www.screencast.com/t/GbqSeikz26kx

The picker UI is basically the same as the search results UI except:

• fewer columns are shown
• paging is provided (we'll need to reuse the paging design here apply to asset search page too)
• just Assets are shown (no Asset Collections, and not the Asset/Asset Collection tab set)
• There's a new "Use This" button. When clicked, writes the selected asset back to the New Asset Usage form.

Specific HTML/CSS/JavaScript Requirements

• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

• This contest must use AngularJS and Bootstrap.

Browser Requirements

• IE 8+
• FF 18+
• Safari 5+
• Chrome 20+

Documentation Provided

 

Register to see documents provided in the contest forum.

Final Submission Guidelines

Submission Deliverables

• A zip archive with all required pages implemented

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.