Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to the Cisco ServiceGrid  Message Flow Editor - UI Prototype Challenge

Cisco ServiceGrid Overview: Cisco ServiceGrid is a cloud-based integration platform that provides a scalable and fast way to connect organizations for seamless multi-party service collaboration. It automates service processes across multiple sources and enables immediate, accurate, and highly secure information exchanges. Organizations are able to share data and govern processes end-to-end across the entire multi-source environment.

Challenge Requirements: For this challenge, submitters will address the Message Flow Designer, by updating the existing HTML Prototype for the Cisco ServiceGrid App based on the provided PSD Storyboard design, primarily for a desktop platform. (It is not expected that users will access this admin application beyond a secure environment, and also not typically on a mobile device). The clickable prototype should be accessible from traditional browsers, allowing movement among views and basic navigation, dynamically rendered on laptop & desktop screens of various sizes. (There are no device resolution constraints at this time, however extra points will be awarded for adaptive design for device screen size flexibility).

 



Final Submission Guidelines

File Downloadables
Storyboard.zip - Storyboard Design
cisco-servicegrid-prototype.zip - UI Prototype as Base Updates

IMPORTANT!

  1. Please ensure quality and efficient code works with these browsers:  IE 10.0+, and latest 2 versions of Firefox, Chrome, Safari
  2. Please ensure fonts, look and feel, hover-state for links and button states, and forms input (input field, dropdown, text area) are simple and consistent across browsers and closely aligned with the provided storyboard design
  3. Follow the existing HTML/CSS/JS Code Implementation that is provided in this challenge.
  4. Prototype pages are to be linked to each other and to model each use case in the requirements (please ask if flow clarification is needed)
  5. Ensure to document the prototype, detailing the UI code structure and provide comments across the JS code
  6. Employ a responsive design framework when viewed on various desktop and laptop screen sizes

Expected Diagram Library:

1. Message Flow Editor UI Prototype screenshot: 03_1_message_flow_designer.png

  1. For this challenge we would like you to simulate how the Message Flow Editor works
  2. For this challenge, submissions, you just click show click flow of how Message Flow works when we presented with our client.
  3. Use cisco-servicegrid-prototype/create-flow.html as base of your submission update

Click Flow

  1. Click flow starts from a user click on the “Containers” menu, and then fly out submenu shows up - (screenshot: 03_2_message_flow_designer.png)
  2. User should be able to drag a new shape into the existing flow - (screenshot: 03_3_message_flow_designer.png)
  3. Update cursor into “move” shape
  4. Drag different shape need show related shape.
  5. Show default size when shape dragged
  6. Update cursor icon into “move” shape
  7. Selected Shape being dragged with a transparent style (screenshot: 03_4_message_flow_designer.png)
  8. Shape can dropped anywhere inside the Editor area
  9. Drop the shape to a desired area (screenshot: 03_5_message_flow_designer.png)
  10. When user select each shape, show corner with rectangle option
  11. No need display the label like “Drop/left click”, that’s just storyboard notes.
  12. User should have ability to rotate the shape when cursor hovers on top of shape, displayed with a rotation guide (screenshot: 03_6_message_flow_designer.png)
  13. User should be able to resize the shape when the cursor hovers at each shape corner, displayed with stretch/collapse guides (screenshot: 03_7_message_flow_designer.png)
  14. User should be able to move the shape when cursor is inside the shape and clicked/dragged (screenshot: 03_8_message_flow_designer.png)
  15. Match how user icon changed when hover on area explained above
  16. Match effects to the storyboard, including how the current icon state changes when hovering on the shapes and outside the shapes Hover on the shape line to present a connect action (screenshot: 03_9_message_flow_designer.png)
  17. Simulate click and drag, let user draw a line between 2 shapes (screenshot: 03_10_message_flow_designer.png)
  18. Release mouse to attach line to a target shape (screenshot: 03_11_message_flow_designer.png)
  19. There’s icons inside shape, they are “T” and “3D cube” icons. Both icons clickable.
  20. Hover at both icons need show blue colored style
  21. Hover on the “T” within a shape to allow user to add a label (screenshot: 03_12_message_flow_designer.png)
  22. Enter a label (screenshot: 03_13_message_flow_designer.png)
  23. Selection of <<Enter>> key or clicking outside the shape should save the label (screenshot: 03_14_message_flow_designer.png)
  24. Click Add Component (screenshot: 03_15_message_flow_designer.png)
  25. When the user clicks on the component, a modal window will be shown.  The content in (03_16_message_flow_designer.png) will be static (4 items as displayed on the screenshot).  When a user clicks on an item in the list, the modal window will close.
    • Also the top menu items “config” and “delete” should be activated on focus. Clicking the config button will open the config modal window for this selected element. The delete button will delete the selected shape. For the delete action, any arrows coming from or going to the selected item will automatically be removed 
  26. Right click on a shape in the Message Flow, and user should be presented with available options in a context menu (screenshot: 03_19_message_flow_designer.png)
    • Top Level menu items New, Open, Template, Undo, Redo, Copy, Paste will not be functional in this prototype
    • In modal window functions
      • Move - when this is clicked, the modal window will close and the user will be able to move the element on the screen
      • Configuration –this will open the configuration screen (See 2.0 Configurations)
      • Copy / Paste / Change Container / Fill Outline - not functional
      • Change Component –this should close this modal window and go back to the flow described in screen 3_16
      • Delete – This should delete the element
  27. (screenshot: 03_20_message_flow_designer.png)
    • Right click on a line in the Message Flow should show options specific to the Line object
    • Also the top menu items “config” and “delete” should be activated 

2. Configurations (screenshot: 04_component_configuration.png)

  1. Clicking on the “Configuration” in the context menu should open this modal window
  2. Input / Output / Documentation tabs can be disabled (not implemented) in this challenge.
  3. Changing text in this screen is not functional – does not need to change the elements in the screen.
  4. Clicking on “x” button / Cancel should close the modal
  5. “?” can be dead link for this prototype
  6. Match modal form visual to the storyboard provided
  7. There’s text placeholder for each inputs, on focus need hide the text placeholder
  8. Implement the toggle button effect for the https field

3. Custom Mapper screenshot: 05_1_custom_mapper.png

  • General
    1. The custom mapper screen is only visible when a user clicks ‘configuration’ on the ‘Custom Mapper’ element (See blue rounded shape)
    2. Clicking on the “Custom Mapper” shape in the Message Flow should show this modal Window Clicking on “x” button / Cancel should close the modal
    3. “?” can be dead link for this prototype
    4. tabs can be disabled (not implemented) in this challenge.
    5. Modal content is organized in 2 columns – the content for the drop downs are hard coded.
    6. Each Column to be identified by a label and a dropdown containing a list of objects
    7. User should have the ability to hover on a data row in these columns, which should highlight the row and present a drag cursor icon
  1. Upon click of a highlighted data row, a line connection should be presented (screenshot: 05_2_custom_mapper.png)
  2. On dragging the cursor over a target datarow on the right column, and releasing the mouse, the line connection should snap to the target data row, simulating a mapping action (screenshot: 05_3_custom_mapper.png)
  3. On completing a map action, the line connection should be represented as grey (screenshot: 05_4_custom_mapper.png)
  4. When user hovers on a mapped row, it should highlight the line and the connected target row (screenshot: 05_5_custom_mapper.png)
  5. User should have the ability to change the mapping line connection to another row item (screenshot: 05_6_custom_mapper.png & screenshot: 05_7_custom_mapper.png)

Client Priorities (The items that are considered highest prototype priorities)

  1. Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
  2. All elements should be Pixel Precision, please pay attention to padding, margin, line-height, etc.
  3. Matching the storyboards (as close as possible) across the required browsers.
  4. Documentation of your prototype

CODE GUIDELINES:
HTML5, CSS3, & Javascript

  1. Provide comments on code and page elements for a clear explanation of the code usage
  2. Please use clean indentation and ensure no conflicts or errors in naming
  3. If HTML, please use HAML to make the HTML code clean; If CSS3, Please use CSS3 styling wherever possible
  4.  If Javascript, please provide Javascript library that will help show the functionality and design of the application and please separate data elements on the individual pages into respective JSON files, and do not hardcode them into the script / HTML pages. You may use a standard set of values to simulate the use case requirements. You are NOT REQUIRED to build the ability to save/manage the different state of the data across the prototype.
  5. Provide source files

IMAGES

  • Images should be properly compressed while still having good visual quality
  • Please use best practices for background based image
  • Please use sprites when using icons for your submission

BROWSER REQUIREMENTS:

  • IE 10+
  • Latest version of Firefox
  • Latest version of Safari
  • Latest version of Chrome

ELIGIBLE EVENTS:

2015 topcoder Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30049456