FAST!! 72Hrs - Field Sales Responsive HTML5 iPad App Prototype Challenge

Project Overview:

Welcome to the FAST!! 72Hrs - Field Sales Responsive HTML5 iPad App Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application for iPad based on provided storyboards using jQuery and the pages will be rendered as iframes within Salesforce1 app.

As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.

NOTE: This application will use OneStarter jQuery Plugin (https://github.com/joshbirk/onestarter) for making Salesforce1 styles (refer Salesforce1 style guide - http://sfdc-styleguide.herokuapp.com), but these are optional for this challenge. Please refer sample Salesforce1 test page with code and recorded video on Salesforce1 app functionality.

IMPORTART: As per the project schedules and FAST challenge the review timelines are very close. Reviewers please note the review timelines for further reference.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. The main content area will be developed which are in scope and the headers will be excluded from this prototype. The actual headers will be rendered from the Salesforce1 app. The pages created on HTML5 will be rendered as iframes within Salesforce1 app as described in the Salesforce1 style guide.

Required Pages:

Below are the required pages in iPad for both Portrait and Landscape orientations.

1. Account Card:

• User opens the application and will see the account card page (01b-1_Account Card View_L).
• The header (blue strip and dark blue strip) implementation is not required, but the main content area will be rendered in iframe - (so create static HTML5 page and load on iframe).
• Show the managers in a tree like structure - (use Google Visualization API for tree/org chart).
• Maximum 2 level of tree nodes are fine for now as shown on storyboard design.
• Allow user to drag manager from the contact list on right panel and just trigger the event only.
• Allow user to hold (show delete icon) and delete manager from the tree node.
• Make contact list scrollable - use device default scrollbar.
• Left nav menu is out of scope.

2. Proposals:

• Once user selects "Opportunity" from menu item, navigate user to opportunity page (02a-1_Proposals_L).
• The header (blue strip) implementation is not required, but the main content area and dark blue strip will be rendered in iframe - (so create static HTML5 page and load on iframe).
• Allow user to toggle between quick view (02a-1_Proposals_L) and list view (02a-2_Proposals_L) using view icons at top-right corner header.
• In quick view, show currently selected proposal details on main content area.
• Allow user to hold (show delete icon) and delete product from the proposal (02a-3_Proposals_L).
• Add Product
  • Follow the "Add product workflow" folder images for more details.
  • Click on "Add Product" button, show user the add product page (02b-1_Proposals_add_L).
  • Allow user to toggle between large grid view (02b-1_Proposals_add_L) and small grid view (02b-2_Proposals_add_L) using view icons at top-right corner header.
  • Populate 'Category', 'Sort', 'Tag' dropdown list items as shown in screens (02b-3_Proposals_add_L, 02b-4_Proposals_add_L, 02b-5_Proposals_add_L).
  • Click on "Done" button at header, add the selected products to the selected proposal and navigate back to the proposals page.
  • Click on product logo, show user the product details on modal popup (02b-6_Proposals_add_L).
  • On order history page (02b-7_Proposals_add_L), allow user to search by Product SKU.
• View Proposal
  • Click on view icon on proposal, navigate user to proposal view page (02c-1_Proposals_view_L).
  • Show share option details as shown on screen (02c-2_Proposals_view_L).
  • Click on "Cancel" button at header, navigate back user to the proposals page.

3. Schedule:

• Once user selects "Schedule" from menu item, navigate user to schedule page (03-1_Schedule_L).
• The header (blue strip) implementation is not required, but the main content area and dark blue strip will be rendered in iframe - (so create static HTML5 page and load on iframe).
• Show appointments at left side panel and google map on main content area.
• Add New Appointment
  • Follow "Add appointment workflow" folder images for more details.
  • Click on add new appointment (+ icon), allow user to select duration as shown on screen (03-2_Schedule_L).
  • On duration panel, user can cancel by clicking cancel button or move next to add event (03-3_Schedule_L).
  • Click on location button (user card icon), show people nearby modal popup (03-4_Schedule_L).
  • Allow user to select or deselect from the people nearby popup.
  • On add event panel, user can go back to duration by clicking back button or complete appointment by clicking "Done" button.
• Appointment Details 
  • Show appointments for the day as shown on screen (03-5_Schedule_L).
  • Click on appointment, show user the appointment details as shown on screen (03-6_Schedule_L).
  • Allow user to remove company name from the appointment details.
• Populate all contacts and all companies, as shown on screen (03-7_Schedule_L) and also allow user to search.
• Populate upcoming appointments, as shown on screen (03-8_Schedule_L).
• Allow user to choose the map type, as shown on screen (03-9_Schedule_L).
• Click on down arrow of calender date, show the calendar control (03-10_Schedule_L) to choose the date.
• Once user filter (Show All, Appointment, Company, Contact) the pin points on map as shown on screen (03-11_Schedule_L).
• Once user selects the pin point on map, show user the details on tootip as shown on screen (03-11_Schedule_L).

4. Main Product:

• Once user selects "Products" from menu item, navigate user to main products page (04-1_Main Product_L).
• The header (blue strip) implementation is not required, but the main content area and dark blue strip will be rendered in iframe - (so create static HTML5 page and load on iframe).
• Allow user to toggle between large grid view (04-1_Main Product_L) and small grid view (04-2_Main Product_L) using view icons at top-right corner header.
• Populate 'Category', 'Sort', 'Tag' dropdown list items as shown in screens (02b-3_Proposals_add_L, 02b-4_Proposals_add_L, 02b-5_Proposals_add_L).
• Allow user to select or deselect icons (Select, Like, Tag, View) for each product on the grid.
• Click on "Add to Proposal" button, show choose proposal modal popup (04-3_Main Product_L) to select proposals under which the selected products will be added.
• Click on "Cancel" button or close icon at right-top corner, close the modal popup.

Specific HTML/CSS/JavaScript Requirements:

• HTML/CSS Requirements:
• Your HTML code must be valid HTML5 and follow best practices
• 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 style-sheet.
• 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.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• For mobile development, images should be properly compressed while still having good visual quality.
• As possible using background color properties, instead of repetition usage of background based image.
• Use sprites technique for the image slicing.

Font Requirements:

Use font - Arial.

JavaScript Requirements:

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:

• jQuery
• OneStarter jQuery Plugin (optional for this challenge)

Browsers Requirements:

• Latest Safari Browser on iPad

Documentation Provided:

Storyboard screens and PSD files: Storyboard.zip

Final Submission Guidelines

Submission Deliverables:

• A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Final Submission:

• For each member, the final submission should be uploaded to the Online Review Tool.