Challenge Overview
INTRODUCTION
This is the second in a series of challenges to rebuild ITI Order, the company’s primary internal and customer facing application. In this challenge we’ll be building a HTML prototype of the desktop web app based on the results of the design challenge.
REQUIREMENTS
The main task of this challenge is to create an HTML/CSS Prototype based on the provided designs. Data displayed in your prototype should be read from a JSON formatted source. Data displays in screens should be refreshed once modals are dismissed or child data is added/updated. For this challenge, use the sample data in the designs to populate your JSON source for the UI. General screen functionality is outlined below. Please reference the completed architecture challenge for details on field definitions and requirements for assets, transfers, etc.
Warehouse Dashboard/General Navigation (01-01)
-- Clicking the icon next to the warehouse name displays the dashboard layout options (02-01, 02-02, 02-03, 02-04)
-- The user selected options determine the table sections to display on the dashboard
-- Default view should display all options
-- Clicking the vertical ellipsis in the column row displays the table column options (02-05)
-- Selected columns should display red or grey checkmarks to indicate visible or hidden
-- Add "Shipped By" as an option in the overlay
-- Default view should display as in the design
-- Clicking the page size number displays the page size options (02-06)
-- Default view should be 10 per page
-- Tapping the ellipsis at the end of the row displays options for the line item (03-01, 03-02, 03-03
-- Box border should be colored the corresponding status color
-- Comments can be entered in-line for all items (01-02, 01-03, 01-04)
-- Activities - display a list of the most recent activity the user has permission to view
-- All sections should be collapsible/expandable by clicking the red arrow in the header
-- Currently selected item in the left navigation should be called out with a red border to the right
-- Left-side navigation should contain fly-out for when cursor hovers over “Warehouse”, similiar to what is shown in 10-02, 10-03
-- Fly-out options should quick links to filtered views of the asset list (inbound, outbound, pending requests, and in-house).
Shipping Assets (04-01)
-- Displayed as a modal when the Ship Asset action is chosen (04-02, 04-04)
-- Multiple assets may be included in a shipment (04-05)
-- Drop downs should be searchable when expanded (04-03)
Receiving Assets (05-01)
-- Displayed as a modal when the Received action is chosen (05-02)
-- Display a toggle row to set the asset status prior to saving (05-03, 05-04)
-- Display a confirmation after success (05-05)
Operations Dashboard (06-01)
-- The Operations dashboard provides an overall look at company wide asset utilization and actions
-- Activities - display a list of the most recent activity the user has permission to view
-- Field Reps - display a list of all field reps, searchable by name
-- Graph should display a mix of requests/tickets that are pending, unresolved, etc.
-- Left-side navigation should contain fly-out when cursor hovers over “Operations” as shown in 10-02, 10-03
-- Fly-out options should quick link to the appropriate views (07-01, 08-01, and 09-01).
-- The third option should read “Inventory Requests” instead of “Inventory”.
-- Note: this replaces the separate icons in the navigation pane for assets, shipments, and inventory.
Operations - Assets (06-02)
-- Display all assets in the warehouse
-- Display inline search and filtering options (06-03, 06-04)
-- Adding a new asset should open the new asset view as a modal (06-05, 06-06)
-- Clicking on the asset serial number in the main view should open a preview overlay with asset details (06-07)
-- Clicking Edit from the asset preview should open the edit asset view as a modal (06-08, 06-09)
Operations Dashboard - Shipments (07-01)
-- Display all shipment details
-- Apply the same search, filtering and display options as other views
-- Note: only one asset will be included in a single shipment.
-- The nested relationship between shipments/assets shown in 07-01 will not apply; each line item should show only a single in-transit asset.
Operations Dashboard - Inventory Requests (08-01)
-- Display all inventory requests
-- Note: the columns displayed should be modified as follows:
-- Replace “Serial Number” with “Inventory Request ID”
-- Remove “Quantity” column
-- Add “To Territory” (shows the ship-to destination territory)
-- Apply the same search, filtering and display options as other views
-- Users can approve/deny requests from the individual line item (08-02)
-- Display request details as a modal where users can decline or approve the request (08-03)
-- Display a confirmation after success (08-04)
Field Rep Dashboard - Inventory (09-01)
-- Display all inventory requests in this view. This should be a virtual mirror of the “Inventory Requests” view shown in 08-01 and described above, including the same column layout, with the following differences
-- The display should be auto-filtered so a field rep sees only the requests for his/her assigned region(s)
-- The addition of a “Request Inventory” button that opens modal for a new request
-- Apply the same search, filtering and display options as other views
-- Clicking a row expands the detail to display all items in the request (09-02)
-- Display new requests as a modal, where they can be saved as a draft or submitted (09-03)
Multiple Role Users (10-01)
-- Some users may have multiple roles within the system
-- Clicking the role in the left navigation displays the dashboard for the role
-- Once on the dashboard for the role, display the expanded menu when the role is hovered over (10-02, 10-03)
CODE REQUIREMENTS
Client Priorities (The items that are considered highest prototype priorities)
-- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers.
-- All elements should be consistent: pay attention to padding, margin, line-height, etc.
-- Matching the designs (as closely as possible) across the required browsers.
HTML5
-- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-- Please use clean INDENTATION for all HTML code so future developers can follow the code.
-- All HTML code naming should not have any conflicts or errors.
-- Element and Attribute names should be in lowercase and use a "-" or camelback naming to separate multiple-word classes (i.e. "main-content", or "MainContent)
-- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
-- No inline CSS styles- all styles must be placed in an external stylesheet.
-- 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.
CSS3
-- Provide comments in the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-- Please use clean INDENTATION for all CSS so developers can follow the code.
-- All CSS naming should not have any conflicts
-- Please use CSS3 styles when creating shapes.
-- 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.
-- Minimum width for the page should be 1280px and be responsive for any larger sizes
Javascript
-- All JavaScript must not have a copyright by a third party.
-- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Web UI Framework
-- You are highly encouraged to use the Bootstrap and AngularJS frameworks
-- Preferred order of frameworks:
1. HTML5 + AngularJS + AngularJS.Bootstrap
2. HTML5 + Bootstrap (no AngularJS or jQuery)
-- Recommended versions:
-- Bootstrap v3.3.7 or latest stable
-- AngularJS v1.5.x or latest stable
Images
-- Images should be properly compressed while still having good visual quality.
-- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
-- IE11
-- Chrome Latest Browser
-- Safari Latest Browser
-- Firefox Latest Browser
SETUP
-- See the challenge forums for details on adding yourself to the Cardinal Health GitLab group
-- All necessary designs and source files can be found in the Resources repository
-- Reference the architecture challenge for data details
-- Any standard Topcoder documentation for a web UI prototype challenge
-- All source code from your project uploaded as a zip
This is the second in a series of challenges to rebuild ITI Order, the company’s primary internal and customer facing application. In this challenge we’ll be building a HTML prototype of the desktop web app based on the results of the design challenge.
REQUIREMENTS
The main task of this challenge is to create an HTML/CSS Prototype based on the provided designs. Data displayed in your prototype should be read from a JSON formatted source. Data displays in screens should be refreshed once modals are dismissed or child data is added/updated. For this challenge, use the sample data in the designs to populate your JSON source for the UI. General screen functionality is outlined below. Please reference the completed architecture challenge for details on field definitions and requirements for assets, transfers, etc.
Warehouse Dashboard/General Navigation (01-01)
-- Clicking the icon next to the warehouse name displays the dashboard layout options (02-01, 02-02, 02-03, 02-04)
-- The user selected options determine the table sections to display on the dashboard
-- Default view should display all options
-- Clicking the vertical ellipsis in the column row displays the table column options (02-05)
-- Selected columns should display red or grey checkmarks to indicate visible or hidden
-- Add "Shipped By" as an option in the overlay
-- Default view should display as in the design
-- Clicking the page size number displays the page size options (02-06)
-- Default view should be 10 per page
-- Tapping the ellipsis at the end of the row displays options for the line item (03-01, 03-02, 03-03
-- Box border should be colored the corresponding status color
-- Comments can be entered in-line for all items (01-02, 01-03, 01-04)
-- Activities - display a list of the most recent activity the user has permission to view
-- All sections should be collapsible/expandable by clicking the red arrow in the header
-- Currently selected item in the left navigation should be called out with a red border to the right
-- Left-side navigation should contain fly-out for when cursor hovers over “Warehouse”, similiar to what is shown in 10-02, 10-03
-- Fly-out options should quick links to filtered views of the asset list (inbound, outbound, pending requests, and in-house).
Shipping Assets (04-01)
-- Displayed as a modal when the Ship Asset action is chosen (04-02, 04-04)
-- Multiple assets may be included in a shipment (04-05)
-- Drop downs should be searchable when expanded (04-03)
Receiving Assets (05-01)
-- Displayed as a modal when the Received action is chosen (05-02)
-- Display a toggle row to set the asset status prior to saving (05-03, 05-04)
-- Display a confirmation after success (05-05)
Operations Dashboard (06-01)
-- The Operations dashboard provides an overall look at company wide asset utilization and actions
-- Activities - display a list of the most recent activity the user has permission to view
-- Field Reps - display a list of all field reps, searchable by name
-- Graph should display a mix of requests/tickets that are pending, unresolved, etc.
-- Left-side navigation should contain fly-out when cursor hovers over “Operations” as shown in 10-02, 10-03
-- Fly-out options should quick link to the appropriate views (07-01, 08-01, and 09-01).
-- The third option should read “Inventory Requests” instead of “Inventory”.
-- Note: this replaces the separate icons in the navigation pane for assets, shipments, and inventory.
Operations - Assets (06-02)
-- Display all assets in the warehouse
-- Display inline search and filtering options (06-03, 06-04)
-- Adding a new asset should open the new asset view as a modal (06-05, 06-06)
-- Clicking on the asset serial number in the main view should open a preview overlay with asset details (06-07)
-- Clicking Edit from the asset preview should open the edit asset view as a modal (06-08, 06-09)
Operations Dashboard - Shipments (07-01)
-- Display all shipment details
-- Apply the same search, filtering and display options as other views
-- Note: only one asset will be included in a single shipment.
-- The nested relationship between shipments/assets shown in 07-01 will not apply; each line item should show only a single in-transit asset.
Operations Dashboard - Inventory Requests (08-01)
-- Display all inventory requests
-- Note: the columns displayed should be modified as follows:
-- Replace “Serial Number” with “Inventory Request ID”
-- Remove “Quantity” column
-- Add “To Territory” (shows the ship-to destination territory)
-- Apply the same search, filtering and display options as other views
-- Users can approve/deny requests from the individual line item (08-02)
-- Display request details as a modal where users can decline or approve the request (08-03)
-- Display a confirmation after success (08-04)
Field Rep Dashboard - Inventory (09-01)
-- Display all inventory requests in this view. This should be a virtual mirror of the “Inventory Requests” view shown in 08-01 and described above, including the same column layout, with the following differences
-- The display should be auto-filtered so a field rep sees only the requests for his/her assigned region(s)
-- The addition of a “Request Inventory” button that opens modal for a new request
-- Apply the same search, filtering and display options as other views
-- Clicking a row expands the detail to display all items in the request (09-02)
-- Display new requests as a modal, where they can be saved as a draft or submitted (09-03)
Multiple Role Users (10-01)
-- Some users may have multiple roles within the system
-- Clicking the role in the left navigation displays the dashboard for the role
-- Once on the dashboard for the role, display the expanded menu when the role is hovered over (10-02, 10-03)
CODE REQUIREMENTS
Client Priorities (The items that are considered highest prototype priorities)
-- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers.
-- All elements should be consistent: pay attention to padding, margin, line-height, etc.
-- Matching the designs (as closely as possible) across the required browsers.
HTML5
-- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-- Please use clean INDENTATION for all HTML code so future developers can follow the code.
-- All HTML code naming should not have any conflicts or errors.
-- Element and Attribute names should be in lowercase and use a "-" or camelback naming to separate multiple-word classes (i.e. "main-content", or "MainContent)
-- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
-- No inline CSS styles- all styles must be placed in an external stylesheet.
-- 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.
CSS3
-- Provide comments in the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-- Please use clean INDENTATION for all CSS so developers can follow the code.
-- All CSS naming should not have any conflicts
-- Please use CSS3 styles when creating shapes.
-- 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.
-- Minimum width for the page should be 1280px and be responsive for any larger sizes
Javascript
-- All JavaScript must not have a copyright by a third party.
-- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Web UI Framework
-- You are highly encouraged to use the Bootstrap and AngularJS frameworks
-- Preferred order of frameworks:
1. HTML5 + AngularJS + AngularJS.Bootstrap
2. HTML5 + Bootstrap (no AngularJS or jQuery)
-- Recommended versions:
-- Bootstrap v3.3.7 or latest stable
-- AngularJS v1.5.x or latest stable
Images
-- Images should be properly compressed while still having good visual quality.
-- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
-- IE11
-- Chrome Latest Browser
-- Safari Latest Browser
-- Firefox Latest Browser
SETUP
-- See the challenge forums for details on adding yourself to the Cardinal Health GitLab group
-- All necessary designs and source files can be found in the Resources repository
-- Reference the architecture challenge for data details
Only adding if arch challenge is completed prior to launch.
Final Submission Guidelines
-- All pages of the UI prototype developed according to the provided design as described above-- Any standard Topcoder documentation for a web UI prototype challenge
-- All source code from your project uploaded as a zip