Challenge Overview
Welcome to Predix - GE TurboConnect - Asset and Model View Editor UI Demo Challenge
The goal of this challenges is to create an HTML/CSS/JavaScript Demo using the GE Predix UI Catalog. The TurboConnect Asset and Model application allow's 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!
- The focus of this UI Demo Challenge is to create the HTML/CSS/JS of the provided UI Design by using the Predix UI Catalog and its pre-existing UI components.
- You can use Predix UI Seed that will accelerate web development for this challenge
- Click around and get familiar with Predix UI CSS and Predix UI Components before you start building this demo.
- As with the existing Predix UI Seed, this application needs to support Responsive/fluid layout. But for now, you can stick with provided Desktop screen sizes only
- We will use this Demo on Touch Screen Laptop, make sure your code supports this.
- For the icons, use the Predix UI Iconography. If the icon not exists, create them as SVG format.
Challenge Assets
https://drive.google.com/drive/folders/0B31nrwic_6z0bklRZHljdU9mejA?usp=sharing
Storyboard.zip - GE TurboConnect Storyboard Design
Important:
- By default, the Predix UI overrides the designers PSD creation.
- All elements in your submission should be built using the Predix UI CSS & Predix UI Components.
- If some elements do not exist within the Predix UI, you should use Google Polymer for this challenge:
-- https://beta.webcomponents.org/
-- https://elements.polymer-project.org/browse?package=google-web-components
- 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. Or you can use an open source library by linked via Bower Library Manager
- 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 a separate file.
- The data for each page will need to be loaded from JSON files.
- Create the appropriate documentation so we are able to setup and test your submission.
TreeView Library
- This is the main TreeView library we want you to use for this challenge.
- If in some parts you cannot mimic the storyboard look and feel and need swap with library default functionality, let us know via challenge forum.
- TreeView Library: https://dhtmlx.com/docs/products/demoApps/dhtmlxXMLEditor/index.html
GE - Turbo Connect Asset and Model View Editor Screen Requirements
General Layout
- Update the page title into Turbo Connect | Asset & Model Editor
- Keep existing Powered by Predix on the right side of header
- Keep existing footer like Predix UI Seed
- Use Predix UI Layout to place all elements in web application
Left Navigation Menu
- Hamburger menu
- Templates Editor
- Assets Editor
- Models Editor
- Models Viewer (Can be dead link)
- History (Can be dead link)
- Import (Can be dead link)
- Help (Can be dead link)
- User Thumbnail (Can be dead link)
1). Models Editor Flow and Interactions
Screenshot: Screenshot: 01_4_Tree-Model-Close-Model-V2.jpg
- Use this design of Close button that is placed on the right side
- For this Models screen page layout consists of header and fluid body with two columns
- Display title for MODELS and Acme Pumping
Left Column
- Filter link, Create Model icons and have the total placed on the top
- Selected row using teal color, white color of edit button show up when selected the row
- Hover on row styling also needs to show up the edit button and tooltips (Screenshot: 01_5_Tree-Model-List-Hover.jpg)
Right Column
- This column displays the Tree View
- Need able to select each row
- Cancel and Save button always placed on the bottom of Tree view box
- Hover on tree view need display edit button and tooltips (Screenshot: 01_6_Tree-Model-Hover.jpg)
Filter
Screenshot: 01_7_Tree-Model-Refine.jpg
- Click Refine link, need load column on the left side (Screenshot: 01_8_Tree-Model.jpg)
- All columns need use fluid width after Refine column appears. Content needs to be pushed to the right
- Display all text inputs like storyboard look
- Notice there are magnify icon for Keyword and Type text inputs
- Show All Assets check box placed on top of every field (Screenshot: 01_9_Tree-Model.jpg)
- Keyword and Type need build using autocomplete function (Screenshot: 01_10_Tree-Model.jpg)
- Type on text input field need display autocomplete (Screenshot: 01_11_Tree-Model.jpg)
- Set bold text on autocomplete result
- Autocomplete sample for Type text input (Screenshot: 01_12_Tree-Model.jpg, Screenshot: 01_13_Tree-Model.jpg)
- For Date created field, you need build the date picker (Screenshot: 01_14_Tree-Model.jpg)
- Need able to navigate by month when click previous and next navigation (Screenshot: 01_15_Tree-Model.jpg)
- After some values filled for the Filter panel (Screenshot: 01_16_Tree-Model.jpg)
Add New Model
Screenshot: 01_17_Tree-Model.jpg
- Add New Model triggered from the button on the right column
- Hover Add Model button need to load the tooltips
- Modal window show up that allow user to input Model Name and select the Hierarchy or Flow option (Screenshot: 01_18_Tree-Model.jpg)
- Create button need close modal window and create empty content on the right side (Screenshot: 01_19_Tree-Model.jpg)
- User need able to drag from left column to the right column (Screenshot: 01_20_Tree-Model.jpg)
- This styling when row being dragging (Screenshot: 01_21_Tree-Model.jpg)
- Drag Placeholder styling when reaching the right column (Screenshot: 01_22_Tree-Model.jpg, Screenshot: 01_23_Tree-Model.jpg)
- After row dropped need show selected style (Screenshot: 01_24_Tree-Model.jpg)
- Notice delete button shows up on the right side of selected row
- Click the arrow needs to expand/collapse each children
- When dragging row, need able to set the indentation (Screenshot: 01_25_Tree-Model-Hover.jpg, Screenshot: 01_26_Tree-Model-Hover.jpg, Screenshot: 01_27_Tree-Model-Hover.jpg)
- After dropped the row, need display the New Asset modal window (Screenshot: 01_28_Tree-Model-Clicked.jpg)
- User-filled text input (Screenshot: 01_29_Tree-Model.jpg, Screenshot: 01_30_Tree-Model.jpg)
- Create button need add new item on Tree View.
- Notice there are remove button on the right side (Screenshot: 01_31_Tree-Model.jpg)
- Select another row also need display remove button (Screenshot: 01_32_Tree-Model.jpg)
- Click delete button need load the modal windows (Screenshot: 01_33_Tree-Model.jpg)
- Need remove the selected row from Tree View
- User need able to change from one row to another (Screenshot: 01_34_Tree-Model.jpg)
- Drag Placeholder shows up when row dragging to another rows (Screenshot: 01_35_Tree-Model.jpg, Screenshot: 01_36_Tree-Model.jpg, Screenshot: 01_37_Tree-Model.jpg, Screenshot: 01_38_Tree-Model.jpg)
- After row dropped (Screenshot: 01_39_Tree-Model.jpg)
- Hover on another row, display the delete button on the right side (Screenshot: 01_40_Tree-Model-Hover.jpg)
Favorites Column
Screenshot: 01_41_Tree-Model.jpg
- Click Favorites button need load the Favorites column (Screenshot: 01_42_Tree-Model.jpg)
- User need able to drag and drop from model column to Favorites (Screenshot: Screenshot: 01_43_Tree-Model.jpg, Screenshot: 01_44_Tree-Model.jpg, Screenshot: 01_45_Tree-Model.jpg)
- After added the row, need display the checkbox on the left side (Screenshot: 01_46_Tree-Model.jpg)
2). Models Editor Flow and Interactions
Screenshot: 02_1_Flow-Model.jpg
- This page displays the Flowchart View
- Diagram Library for this challenge can be image based
- Hover on the Add model button needs to load the tooltips
- New Model modal window show up (Screenshot: 02_2_Flow-Model.jpg)
- Modal window after user selects the option (Screenshot: 02_3_Flow-Model.jpg)
Refine
Screenshot: 02_10_Flow-Model.jpg
- Click Refine needs to load the column on the left side (Screenshot: 02_11_Flow-Model.jpg)
- Other columns need to be pushed to the right side
- Need able to checked on/off the checkboxes (Screenshot: 02_12_Flow-Model.jpg)
Add New Asset
Screenshot: 02_13_Flow-Model.jpg
- Hover on Add New Asset need load the modal window
- Add New Asset Modal Window (Screenshot: 02_14_Flow-Model.jpg)
- After type some value (Screenshot: 02_15_Flow-Model.jpg)
- Save button need close the modal
3) Templates Editor Flow and Interactions
Screenshot: 03_Predix-Update-01.jpg
- This is Templates Editor screen that user access from the 1st button on the left menu
- Templates column on the left and Collection column on the right side
- Selected row need use grey background
- Click Filter link need load the Filter column (Screenshot: 03_Predix-Update-02.jpg)
- Match forms like storyboard (Screenshot: 03_Predix-Update-03.jpg)
- Clear need empty all values
- Filter button placed on the right side
- For Templates screen there are 2 options for Folder View and List View
- Click List View tab need display templates in list format (Screenshot: 03_Predix-Update-04.jpg)
- Click Template Name need load the Template Updates
4). Templates Updates
Screenshot: 03_Predix-Update-05.jpg
- User landed to this screen after double click name on Templates page
- This is Templates Updates look
- Match input fields like storyboard look
- Display some boxes with collapsible function
- User need able to scroll down the page to see whole content
- Properties content when expand the content (Screenshot: 03_Predix-Update-06.jpg)
- Match table data like storyboard look
- Click Save take user back to Templates screen
- Select some checkboxes need highlighted the rows (Screenshot: 03_Predix-Update-07.jpg)
- Click Export button need load Export screen (Screenshot: 03_Predix-Update-08.jpg)
- Only one option able to select for radio buttons
- But, checkboxes can select more than one
5). Assets Editor Flow and Interactions
Screenshot: 03_Predix-Update-09.jpg
- User access this screen from 2nd menu on the left navigation
- Page display 2 columns for main content and Collection on the right side
- Filter link loads the Filter column. Set hidden by default
- User can drag the collection to the asset area (Screenshot: 03_Predix-Update-10.jpg)
- Assign Template modal window show up after dropped to some rows (Screenshot: 03_Predix-Update-11.jpg)
- User can select some options of the checkboxes
- Click Apply button need load Asset Updates explained below
Asset Updates
Screenshot: 03_Predix-Update-12.jpg
- Follow fields like storyboard look
- Display some collapsible boxes like storyboard look
- Click Arrow under Template field or Add Template links need load Templates screen that allow user to add some template
Templates with Floating Assets
Screenshot: 03_Predix-Update-13.jpg
- This templates screen display Floating Assets on the bottom
- User need able to select some checkboxes and then drag to Contained Templates area (Screenshot: 03_Predix-Update-14.jpg, Screenshot: 03_Predix-Update-15.jpg)
- Match styling for dragged button
- After dropped some options need take user back to Assets screens under Contained templates box (Screenshot: 03_Predix-Update-16.jpg)
Properties Box
Screenshot: 03_Predix-Update-17.jpg
- Expand the Properties box need display this table
- Match data like storyboard
- Need able to select rows by click the checkboxes
- Click Add tag selected need load the modal window (Screenshot: 03_Predix-Update-18.jpg)
- There are 3 columns for Tag Source modal window
- Add Tags need close the modal window
- Click Add Tags button need take user back to previous screen (Screenshot: 03_19_Predix-Update-19.jpg)
- Models Name placed on the left side
- Notice there are Hierarchy and Flow options
Keyword Box
Screenshot: 03_Predix-Update-19.jpg
- This is content when expand the Keyword
- Add New Keyword can be dead links
- Lock icons placed on the right side
Geolocation Box
Screenshot: 03_Predix-Update-21.jpg
- Display geolocation fields like storyboard look
- Click View Map need display the Google map on Modal Windows
- Also, on the left side. There’s a floating filter
- Match fields like storyboard look
Client Priorities (The items that are considered highest demo priorities)
- Creating quality and efficient Predix UI demo that works in all the requested browsers.
- Matching the storyboards (as close as possible) across the required browsers.
- Best Practice Predix UI web application
- Documentation to set up your submission
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give 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 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.
CSS/SCSS
- 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 creating 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.
Javascript
- Basic Javascript should be provided by the 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.
SVG
- Use SVG for icons that not exists on Predix UI Iconography
Browsers Requirements
- IE11
- Safari Latest Browser
- Chrome Latest Browser
The goal of this challenges is to create an HTML/CSS/JavaScript Demo using the GE Predix UI Catalog. The TurboConnect Asset and Model application allow's 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
General Details and Tasks- The focus of this UI Demo Challenge is to create the HTML/CSS/JS of the provided UI Design by using the Predix UI Catalog and its pre-existing UI components.
- You can use Predix UI Seed that will accelerate web development for this challenge
- Click around and get familiar with Predix UI CSS and Predix UI Components before you start building this demo.
- As with the existing Predix UI Seed, this application needs to support Responsive/fluid layout. But for now, you can stick with provided Desktop screen sizes only
- We will use this Demo on Touch Screen Laptop, make sure your code supports this.
- For the icons, use the Predix UI Iconography. If the icon not exists, create them as SVG format.
Challenge Assets
https://drive.google.com/drive/folders/0B31nrwic_6z0bklRZHljdU9mejA?usp=sharing
Storyboard.zip - GE TurboConnect Storyboard Design
Important:
- By default, the Predix UI overrides the designers PSD creation.
- All elements in your submission should be built using the Predix UI CSS & Predix UI Components.
- If some elements do not exist within the Predix UI, you should use Google Polymer for this challenge:
-- https://beta.webcomponents.org/
-- https://elements.polymer-project.org/browse?package=google-web-components
- 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. Or you can use an open source library by linked via Bower Library Manager
- 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 a separate file.
- The data for each page will need to be loaded from JSON files.
- Create the appropriate documentation so we are able to setup and test your submission.
TreeView Library
- This is the main TreeView library we want you to use for this challenge.
- If in some parts you cannot mimic the storyboard look and feel and need swap with library default functionality, let us know via challenge forum.
- TreeView Library: https://dhtmlx.com/docs/products/demoApps/dhtmlxXMLEditor/index.html
GE - Turbo Connect Asset and Model View Editor Screen Requirements
General Layout
- Update the page title into Turbo Connect | Asset & Model Editor
- Keep existing Powered by Predix on the right side of header
- Keep existing footer like Predix UI Seed
- Use Predix UI Layout to place all elements in web application
Left Navigation Menu
- Hamburger menu
- Templates Editor
- Assets Editor
- Models Editor
- Models Viewer (Can be dead link)
- History (Can be dead link)
- Import (Can be dead link)
- Help (Can be dead link)
- User Thumbnail (Can be dead link)
1). Models Editor Flow and Interactions
Screenshot: Screenshot: 01_4_Tree-Model-Close-Model-V2.jpg
- Use this design of Close button that is placed on the right side
- For this Models screen page layout consists of header and fluid body with two columns
- Display title for MODELS and Acme Pumping
Left Column
- Filter link, Create Model icons and have the total placed on the top
- Selected row using teal color, white color of edit button show up when selected the row
- Hover on row styling also needs to show up the edit button and tooltips (Screenshot: 01_5_Tree-Model-List-Hover.jpg)
Right Column
- This column displays the Tree View
- Need able to select each row
- Cancel and Save button always placed on the bottom of Tree view box
- Hover on tree view need display edit button and tooltips (Screenshot: 01_6_Tree-Model-Hover.jpg)
Filter
Screenshot: 01_7_Tree-Model-Refine.jpg
- Click Refine link, need load column on the left side (Screenshot: 01_8_Tree-Model.jpg)
- All columns need use fluid width after Refine column appears. Content needs to be pushed to the right
- Display all text inputs like storyboard look
- Notice there are magnify icon for Keyword and Type text inputs
- Show All Assets check box placed on top of every field (Screenshot: 01_9_Tree-Model.jpg)
- Keyword and Type need build using autocomplete function (Screenshot: 01_10_Tree-Model.jpg)
- Type on text input field need display autocomplete (Screenshot: 01_11_Tree-Model.jpg)
- Set bold text on autocomplete result
- Autocomplete sample for Type text input (Screenshot: 01_12_Tree-Model.jpg, Screenshot: 01_13_Tree-Model.jpg)
- For Date created field, you need build the date picker (Screenshot: 01_14_Tree-Model.jpg)
- Need able to navigate by month when click previous and next navigation (Screenshot: 01_15_Tree-Model.jpg)
- After some values filled for the Filter panel (Screenshot: 01_16_Tree-Model.jpg)
Add New Model
Screenshot: 01_17_Tree-Model.jpg
- Add New Model triggered from the button on the right column
- Hover Add Model button need to load the tooltips
- Modal window show up that allow user to input Model Name and select the Hierarchy or Flow option (Screenshot: 01_18_Tree-Model.jpg)
- Create button need close modal window and create empty content on the right side (Screenshot: 01_19_Tree-Model.jpg)
- User need able to drag from left column to the right column (Screenshot: 01_20_Tree-Model.jpg)
- This styling when row being dragging (Screenshot: 01_21_Tree-Model.jpg)
- Drag Placeholder styling when reaching the right column (Screenshot: 01_22_Tree-Model.jpg, Screenshot: 01_23_Tree-Model.jpg)
- After row dropped need show selected style (Screenshot: 01_24_Tree-Model.jpg)
- Notice delete button shows up on the right side of selected row
- Click the arrow needs to expand/collapse each children
- When dragging row, need able to set the indentation (Screenshot: 01_25_Tree-Model-Hover.jpg, Screenshot: 01_26_Tree-Model-Hover.jpg, Screenshot: 01_27_Tree-Model-Hover.jpg)
- After dropped the row, need display the New Asset modal window (Screenshot: 01_28_Tree-Model-Clicked.jpg)
- User-filled text input (Screenshot: 01_29_Tree-Model.jpg, Screenshot: 01_30_Tree-Model.jpg)
- Create button need add new item on Tree View.
- Notice there are remove button on the right side (Screenshot: 01_31_Tree-Model.jpg)
- Select another row also need display remove button (Screenshot: 01_32_Tree-Model.jpg)
- Click delete button need load the modal windows (Screenshot: 01_33_Tree-Model.jpg)
- Need remove the selected row from Tree View
- User need able to change from one row to another (Screenshot: 01_34_Tree-Model.jpg)
- Drag Placeholder shows up when row dragging to another rows (Screenshot: 01_35_Tree-Model.jpg, Screenshot: 01_36_Tree-Model.jpg, Screenshot: 01_37_Tree-Model.jpg, Screenshot: 01_38_Tree-Model.jpg)
- After row dropped (Screenshot: 01_39_Tree-Model.jpg)
- Hover on another row, display the delete button on the right side (Screenshot: 01_40_Tree-Model-Hover.jpg)
Favorites Column
Screenshot: 01_41_Tree-Model.jpg
- Click Favorites button need load the Favorites column (Screenshot: 01_42_Tree-Model.jpg)
- User need able to drag and drop from model column to Favorites (Screenshot: Screenshot: 01_43_Tree-Model.jpg, Screenshot: 01_44_Tree-Model.jpg, Screenshot: 01_45_Tree-Model.jpg)
- After added the row, need display the checkbox on the left side (Screenshot: 01_46_Tree-Model.jpg)
2). Models Editor Flow and Interactions
Screenshot: 02_1_Flow-Model.jpg
- This page displays the Flowchart View
- Diagram Library for this challenge can be image based
- Hover on the Add model button needs to load the tooltips
- New Model modal window show up (Screenshot: 02_2_Flow-Model.jpg)
- Modal window after user selects the option (Screenshot: 02_3_Flow-Model.jpg)
Refine
Screenshot: 02_10_Flow-Model.jpg
- Click Refine needs to load the column on the left side (Screenshot: 02_11_Flow-Model.jpg)
- Other columns need to be pushed to the right side
- Need able to checked on/off the checkboxes (Screenshot: 02_12_Flow-Model.jpg)
Add New Asset
Screenshot: 02_13_Flow-Model.jpg
- Hover on Add New Asset need load the modal window
- Add New Asset Modal Window (Screenshot: 02_14_Flow-Model.jpg)
- After type some value (Screenshot: 02_15_Flow-Model.jpg)
- Save button need close the modal
3) Templates Editor Flow and Interactions
Screenshot: 03_Predix-Update-01.jpg
- This is Templates Editor screen that user access from the 1st button on the left menu
- Templates column on the left and Collection column on the right side
- Selected row need use grey background
- Click Filter link need load the Filter column (Screenshot: 03_Predix-Update-02.jpg)
- Match forms like storyboard (Screenshot: 03_Predix-Update-03.jpg)
- Clear need empty all values
- Filter button placed on the right side
- For Templates screen there are 2 options for Folder View and List View
- Click List View tab need display templates in list format (Screenshot: 03_Predix-Update-04.jpg)
- Click Template Name need load the Template Updates
4). Templates Updates
Screenshot: 03_Predix-Update-05.jpg
- User landed to this screen after double click name on Templates page
- This is Templates Updates look
- Match input fields like storyboard look
- Display some boxes with collapsible function
- User need able to scroll down the page to see whole content
- Properties content when expand the content (Screenshot: 03_Predix-Update-06.jpg)
- Match table data like storyboard look
- Click Save take user back to Templates screen
- Select some checkboxes need highlighted the rows (Screenshot: 03_Predix-Update-07.jpg)
- Click Export button need load Export screen (Screenshot: 03_Predix-Update-08.jpg)
- Only one option able to select for radio buttons
- But, checkboxes can select more than one
5). Assets Editor Flow and Interactions
Screenshot: 03_Predix-Update-09.jpg
- User access this screen from 2nd menu on the left navigation
- Page display 2 columns for main content and Collection on the right side
- Filter link loads the Filter column. Set hidden by default
- User can drag the collection to the asset area (Screenshot: 03_Predix-Update-10.jpg)
- Assign Template modal window show up after dropped to some rows (Screenshot: 03_Predix-Update-11.jpg)
- User can select some options of the checkboxes
- Click Apply button need load Asset Updates explained below
Asset Updates
Screenshot: 03_Predix-Update-12.jpg
- Follow fields like storyboard look
- Display some collapsible boxes like storyboard look
- Click Arrow under Template field or Add Template links need load Templates screen that allow user to add some template
Templates with Floating Assets
Screenshot: 03_Predix-Update-13.jpg
- This templates screen display Floating Assets on the bottom
- User need able to select some checkboxes and then drag to Contained Templates area (Screenshot: 03_Predix-Update-14.jpg, Screenshot: 03_Predix-Update-15.jpg)
- Match styling for dragged button
- After dropped some options need take user back to Assets screens under Contained templates box (Screenshot: 03_Predix-Update-16.jpg)
Properties Box
Screenshot: 03_Predix-Update-17.jpg
- Expand the Properties box need display this table
- Match data like storyboard
- Need able to select rows by click the checkboxes
- Click Add tag selected need load the modal window (Screenshot: 03_Predix-Update-18.jpg)
- There are 3 columns for Tag Source modal window
- Add Tags need close the modal window
- Click Add Tags button need take user back to previous screen (Screenshot: 03_19_Predix-Update-19.jpg)
- Models Name placed on the left side
- Notice there are Hierarchy and Flow options
Keyword Box
Screenshot: 03_Predix-Update-19.jpg
- This is content when expand the Keyword
- Add New Keyword can be dead links
- Lock icons placed on the right side
Geolocation Box
Screenshot: 03_Predix-Update-21.jpg
- Display geolocation fields like storyboard look
- Click View Map need display the Google map on Modal Windows
- Also, on the left side. There’s a floating filter
- Match fields like storyboard look
Client Priorities (The items that are considered highest demo priorities)
- Creating quality and efficient Predix UI demo that works in all the requested browsers.
- Matching the storyboards (as close as possible) across the required browsers.
- Best Practice Predix UI web application
- Documentation to set up your submission
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give 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 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.
CSS/SCSS
- 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 creating 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.
Javascript
- Basic Javascript should be provided by the 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.
SVG
- Use SVG for icons that not exists on Predix UI Iconography
Browsers Requirements
- IE11
- Safari Latest Browser
- Chrome Latest Browser