Predix - GE TurboConnect - Asset and Model View Editor UI Demo Refinement Challenge







    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Overview

    Welcome to Predix - GE TurboConnect - Asset and Model View Editor UI Demo Refinement Challenge. We are looking to continue the work from the previous challenge and add in the Asset and Template sections plus refine the overall "demo" flow.

    The goal of this challenges is to continue updating the Predix UI Prototype using the GE Predix UI based on provided storyboards. The Asset and Model application will allow users the ability to define domains, build prototypes (high-level abstracts/templates) of assets & to create vendor specific definitions for those templates.

    Read the challenge details and let us know if you have any questions!

    Final Submission Guidelines

    Challenge Downloadable

    General Tasks
    - The focus of this UI Prototype challenge is to continue updating the HTML/CSS/JS of the provided UI Design by using the Predix UI Catalog and its pre-existing UI components. See storyboard screens required below.
    - FYI: The base of the provided Predix UI Demo is using Predix UI Seed 
    - Click around and get familiar with the Predix UI CSS and Predix UI Components before you start adding/updating the demo. Check detail documentation here
    - As with the existing Predix UI Seed, this application needs to support Responsive breakpoints
    - For all icons use the Predix UI Iconography. If the icon does not exist, create them as SVG format.

    - All elements in your submission should be built using the Predix UI CSS & Predix UI Components.
    - If there are elements that do not exist within the Predix UI, you can also use Google Polymer for this challenge:
    -- https://beta.webcomponents.org/
    -- https://elements.polymer-project.org/browse?package=google-web-components

    - By default the Predix UI overrides the designers PSD creation.
    - We do not want you to customize any of the pre-existing UI components.
    - Let us know if you cannot find related Components and CSS.
    - If you cannot find related Components you can use an open source library linked via Bower
    - Do not just put raw JavaScript library inside your prototype
    - You must use SASS/SCSS for CSS Pre-Processor
    - If you use a custom styling/function it must be based on the existing library and put in separate file
    - The data for each page will need to be loaded from JSON files.
    - Create the documentation so we are able to setup and test your submission (this can be left for Final Fixes)

    Base Submission
    - Please fork this following Github: https://github.com/topcoderinc/turboconnect
    - Send your GitHub username via challenge forum to get the access
    - Challenge winner will need to submit a Merge Request to our GitHub
    - Navigate to Predix UI folder via your Command Prompt or Terminal
    - Install tool, you will need Node, Bower and Gulp to be installed globally on your machine.  
    -- Install Node (https://nodejs.org/en/download/). This includes npm - the node package manager.  
    -- Install Bower (https://bower.io/) globally `npm install bower -g`  
    -- Install Gulp (http://gulpjs.com/) globally `npm install gulp -g`
    - Run the following commands via Terminal/Command Prompt from the extracted folder
    -- npm install
    -- bower install
    -- gulp
    - Navigate to http://localhost:5000/ to see your Predix UI GE
    - Important: Your updated code needs to be running without error when we push to the cloud (example on Github: https://github.com/PredixDev/predix-seed)

    TreeView Library
    In this challenge, the Treeview should be available based on the first demo challenge.
    - This is the Treeview library we want you to use for this challenge. https://dhtmlx.com/docs/products/dhtmlxTreeView/
    - You can also use TreeGrid library for the missing functionality: https://dhtmlx.com/docs/products/dhtmlxTreeGrid/

    GE - Turbo Connect Asset, Template and Demo Update Screen Requirements
    General Update

    - All table columns need fix to use full 100% height column on required browsers
    - Update copyright year from 2015 to 2017

    1). Templates Editor Flow and Interactions
    Folder: Templates
    Demo Features:
    - The user is able to view existing Templates and Create new Templates
    - The user is able to Filter on their Templates (Demo is filtering on Water)
    - The user starts with a collapsed folder view and is then able to open their folders
    - The user is able to save their favorite to their "Collection" - Demo is showing "Water Tank"
    - The user is able to switch from Folder to List view
    - The user is able to export their template to csv.

    Template Demo Flow:

    - We should open the Template view in the Collapsed Folder View
    - The user is able to open the Water Tanks Folder and add "Water Tank" to their "Collection" by click on the "Collection Toolbox" icon

    - The user clicks on "Filter" to open the Filter Column and they filter on "Water" (Clear will empty all values)

    - The user clicks on List View to see the templates in list view

    - Clicking on the Template Name will allow the user to edit the Template

    The user is able to edit the Template attributes
    They click on Properties to view/edit the properties (these sections should open and close)

    - They click back on the Templates header and are taken back to the list view (with nothing checked)

    - The user decides they would like to export some templates and selects (Municipality, Municipality, Water Tank)
    - They click on the Export button

    The user is taken to the export screen where they can export their templates

    Screen Details:
    - Reuse existing styles from the provided Demo files
    - Update based on the provided screen designs.

    2). Assets Editor Flow and Interactions
    Folder: Assets
    Demo Features:
    - The user is able to View existing and Create new Assets (default should be closed Filter view = no image for this)
    - Clicking on the Asset name will allow the user to see the Asset details and edit/update the Asset
    - The user is able to click on Filter and Filter the assets (for the demo it is Water)
    - The user can scroll to see all available assets
    - If the user has a favorite Template they like to use they can drag and drop the Template from their "Collection" onto an Asset (ex: Acme Town)
    - When the user drags the Template onto the Asset it asks the user to select the type of Template
    - Once the user applies the Template it takes them to the edit view of the Asset where they can see their "Water Tank" Template has been applied
    - The user is able to click on the "Properties" area and edit associated properties to add additional "Tags"
    - The user is able to scroll and see other Attributes of the Asset 

    Demo Flow:
    Screenshot: 03_Predix-Update-09.jpg
    - This is the Asset sections of the application
    - By default, we want to show the Filter closed

    Screenshot: 03_Predix-Update-10.jpg
    - User can drag the saved "Collection template" "Water Tank" to the Asset "Acme Town" to apply the Template to that Asset

    Screenshot: 03_Predix-Update-11.jpg
    - Assign template window
    - Clicking Apply button will load the Asset Attributes

    Screenshot: 03_Predix-Update-12.jpg/03_Predix-Update-16.jpg
    - Asset Attribute view
    - The different sections will open/close
    - User is able to scroll to see all Attribute sections (and the demo has different sections opening and closing)
    - Please include the "Asset Image" from 03_Predix-Update-16.jpg (as it is missing in 03_Predix-Update-12.jpg )

    Client Request: Screenshot: 03_Predix-Update-20_ES.jpg
    - Remove the Geolocation box

    Screenshot: 03_Predix-Update-17.jpg
    - The user will click the Properties Attribute to add additional tags
    - Match data like storyboard
    - Need able to select rows by clicking the radio boxes

    Screenshot: 03_Predix-Update-18.jpg
    - The user will click on "Add tag to selected" to add more Tags to the selected item.
    - There are 3 columns for Tag Source modal window
    - Click Add Tags button need take user back to previous screen (Screenshot: 03_19_Predix-Update-19.jpg)

    Client Request: Screenshot: 03_Predix-Update-18_ES.jpg
    - Remove the Auto Grouping Algorithm field

    Screenshot: 03_Predix-Update-19.jpg
    - The user has now added the new tags (viewed in the default column)

    Client Request: Screenshot: 03_Predix-Update-19_ES.jpg
    - Update Default column title into Value
    - On the table row, just need display single Tag value

    Screenshot: 03_Predix-Update-21.jpg
    - User is able to scroll and see the Keyword section and open to see Keywords

    3). Create an Asset
    Folder: Create an Asset

    Demo Features:
    - The user is able to Create an within the Asset section and the Models section. We will need you to create some of these flows based on the provided screens (from different references)
    - You can re-use existing Create an Asset function

    Create an Asset Flow 1
    - The user is in the Asset area and they click on the "+Asset" icon in the top bar (01-Create-Asset.jpg)
    - The user is presented with the Modal window to name their new Asset (02-New-Asset.jpg, 03-New-Asset.jpg)
    - The user will see the New Asset in their Asset list

    Create an Asset Flow 2
    - The user is in the Models area and they click on the "+Asset" icon in the top bar (01-Create-Asset-From-Model.jpg)
    - The user is presented with the Modal window to name their new Asset (02-New-Asset.jpg, 03-New-Asset.jpg)
    - The user will see the New Asset in their Asset list

    4). History
    Folder: History and Import Screens
    Demo Features:
    - We would like you to add in the placeholder image for History Tab (Screenshot: history.jpg)
    - Goal is to have the application not have any gaps/be able to show as part of a Demo

    5). Import
    Folder: History and Import Screens
    Demo Features:
    - We would like you to add in the placeholder image for Import Tab (Screenshot: import.jpg)
    - Goal is to have the application not have any gaps/be able to show as part of a Demo

    Client Priorities (The items that are considered highest prototype priorities)
    - Creating quality and efficient Predix UI web application that works in all the requested browsers.
    - Matching the storyboard flow and experience across the required browsers.
    - Best Practice Predix UI web application
    - Documentation to set up your submission


    - Comment your code. The goal is to help future developers understand the code.
    - 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 camel 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.

    - Provide comments on 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.
    - As possible use CSS3 style when create all styling.
    - 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.

    - Basic Javascript should coming from Predix UI components
    - All JavaScript must not have a copyright by a third party.
    - It is fine to use GPL/MIT/Open Source code.
    - 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.

    - Use SVG for icons that not exists on Predix UI Iconography

    Browsers Requirements
    - IE11
    - Chrome Latest Browser
    - Safari and Chrome Mobile on iPad

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2017 TopCoder(R) Open


    Final Review:

    Community Review Board


    User Sign-Off