Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Challenge Objectives

  • HTML Web app, targeting Dojo, JQuery, and all the latest browser versions (Firefox, Safari, IE, Chrome)

  • ArcGIS will also be used (https://developers.arcgis.com/javascript/)

  • This challenge will build the skeleton on top of an existing proof of concept.  This will be part of the conversion of a large set of storyboards to a full HTML prototype

 

Project Background

 

  • The customer has an existing web application that is relatively unskinned.  We have worked to build them storyboards that implement a better UI

  • This challenge will continue the conversion process.  We already have a proof of concept, with a basic header and side menu, and one side menu option, around an ArcGIS view.  

  • Future challenges in this stream will convert more screens.

 

Technology Stack

 

  • For this challenge, we are targeting static HTML that will work in all modern browsers, including Firefox, Safari, IE, and Chrome.

  • In production, the code will run as JSP files on Apache Tomcat, but for this challenge, we are just building out the HTML

  • We want to keep the deployment environment server as lightweight as possible.  The simpler the better. The existing proof of concept can just be opened in a browser from the file system, which is fine.

  • ArcGIS integration will be required.  The proof of concept already implements this a bit, but the app will be built around an ArcGIS window.  

  • ArcGIS requires Dojo (https://dojotoolkit.org/).  We can also use jQuery and related plugins, like jQuery UI and jQuery Date Picker.  The client has specifically asked that we do NOT use Bootstrap for this challenge, so Bootstrap usage is explicitly prohibited.

  • For these prototype conversion challenges, you should use standard ArcGIS controls, where appropriate, skinning them through CSS.  This applies to things like the legend, layers, and filters. Do NOT re-create an ArcGIS control in HTML, as that will just make merging the design into the existing application harder.

Specific versions include:

   

Storyboards

The forum will contain a link to grant yourself access to the storyboard files, and a Marvel app link will also be available showing the web UI storyboards.

 

Individual requirements

These MarvelApp links are in scope:

 

Data

The data for the search panel, the job list view, and the job details panel, should be read from a JSON file.  Do not hard-code this into the prototype, since in the final integration this will be coming from API calls.


Export

The buttons for Export Attachments and Export to CSV can just be empty callbacks for now.  Those won't do anything until integration.

Layer list widget

For the layer list and the "Layers" option in the side menu, please make sure to use the LayerList widget from ArcGIS:  https://developers.arcgis.com/javascript/3/jssamples/widget_layerlist_basic.html ,skinning it to match the storyboard through CSS.  The existing code looks a bit like this:

let layerListWidget=new LayerList({
        map:dwMap,
        layers:arrOfLyrs4LL,
        showLegend:false,
        showSubLayers:true,
        removeUnderscores:true
    },"layersListDiv");
layerListWidget.startup();

And the div:

<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="iconClass:'layersIcon'" title="Layers">
   <div id="layersListDiv"></div>
</div>

CSS and HTML

We won’t be doing the actual implementation of the functionality for the final app.  We are only doing the prototype conversion. Because of this, we need to ensure that the HTML is extremely well laid out, easily split into pieces for JSP conversion, and the CSS has to be portable, DRY (don’t repeat yourself), and easily editable / applied to new prototype elements as we convert further.

 

Images

 

Any images converted from the storyboard should support 2x resolution, in addition to 1x resolution.

 

Deployment guide and validation document

 

These files are required as part of your submission:

 

A README.md that covers:

 

  • Basic deployment - how to run the app and view the results in a browser.  Plan on the reviewers having Windows or Mac.

 

Validation video / screencast

  • Please show as many browsers working with the app as possible, ideally all 4 major ones:  Firefox, Safari, Chrome, and IE.

 

What To Submit

 

Please submit:

 

  • The converted HTML, JS, and CSS

  • A README.md

  • A link to the validation video

  •  

 

 


Final Submission Guidelines

Please see above

ELIGIBLE EVENTS:

Topcoder Open 2019

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30072604