Episerver - Week 1/3 - Create blocks and models for water leakage problems

Challenge Overview

Episerver is an online, commercial website creation tool written using the Microsoft technology stack, ASP.NET. Episerver is one of the most powerful website content management systems (CMS) in existence today.

 

It provides the tools for a successful website. Episerver not only provides a CMS solution for your website but it also provides extra modules that can be integrated easily to add quick enhancements to your website. These modules include forms, e-Commerce, Marketing automation, Social, Analytics. More information about this is here.

 

Our client wants to leverage Episerver to report water leakage problems. In this challenge, you are required to create a block for water leakage problems, which we can use in the following up challenges.

 

Requirements for this challenge 

 

(1) Set up the development environment and install a sample site (Alloy site), if you don’t know how to do it, follow the specification of the 1st learning challenge.

(2) Create a block for showing water leakage problem, the details are below.

 

Create a Episerver Block ReportAProblemWaterLeakageBlock with the properties as below.

 

Block Name: ReportAProblemWaterLeakageBlock 

Properties:  

• LeakLocationLabel: String

  • The location of the leak.

  • When clicking on the textbox, it should popup an address search bar with a google map. Address will be automatically populated in this Text box by every keystroke where Google map needs to be integrated and according to longitude & latitude in google map in CMS.

• LeakConditionDetailsLabel: XhtmlString

  • Description of the leak, for example, “leak is in front of the house by the garage, the pipe is broken”.

• LeakConditionLabel: String

  • Where leakage condition is in one line, choose one of the following randomly.

    • Hill

    • Point

    • Alley

    • Road

    • Center

    • Junction

    • Avenue

• LeakSnap: ContentReference

  • Image URL of Leak, choose one of the following URLs randomly

    • http://dummyimage.com/165x234.jpg/5fa2dd/ffffff

    • http://dummyimage.com/230x104.png/cc0000/ffffff

    • http://dummyimage.com/106x246.bmp/5fa2dd/ffffff

    • http://dummyimage.com/162x188.png/dddddd/000000

    • http://dummyimage.com/226x150.bmp/5fa2dd/ffffff

    • http://dummyimage.com/129x161.bmp/cc0000/ffffff

    • http://dummyimage.com/242x204.bmp/5fa2dd/ffffff

    • http://dummyimage.com/154x234.png/dddddd/000000

    • http://dummyimage.com/112x109.png/cc0000/ffffff

    • http://dummyimage.com/209x117.jpg/ff4444/ffffff

    • http://dummyimage.com/126x194.jpg/5fa2dd/ffffff

    • http://dummyimage.com/154x187.jpg/ff4444/ffffff

    • http://dummyimage.com/144x159.bmp/cc0000/ffffff

    • http://dummyimage.com/170x209.jpg/ff4444/ffffff

    • http://dummyimage.com/245x167.bmp/cc0000/ffffff

    • http://dummyimage.com/193x193.bmp/ff4444/ffffff

    • http://dummyimage.com/156x244.png/5fa2dd/ffffff

    • http://dummyimage.com/204x160.jpg/dddddd/000000

    • http://dummyimage.com/126x195.jpg/ff4444/ffffff

    • http://dummyimage.com/170x238.png/cc0000/ffffff

    • http://dummyimage.com/122x203.jpg/5fa2dd/ffffff

• LeakageReporterNameLabel: String

  • The name of the reporter, choose one of the following values randomly

    • Bill Edison

    • Harshit Mehta

    • Nate Brougher

• LeakageReporterAddressLabel: String

  • The address of the leakage reporter.

  • When clicking on the textbox, it should popup an address search bar with a google map. Address will be automatically populated in this Text box by every keystroke where Google map needs to be integrated and according to longitude & latitude in google map in CMS.

  • The address will be automatically populated in this Text box by every keystroke where Google map needs to be integrated and according to longitude & latitude in google map in CMS—Google map view will be shown in UI-View (CSHTML)  of this Block

• LeakageReporterEmailAddress : String 

  • The email address of the reporter, e.g., billsedison@topcoder.com

  • Should validate if the email address is valid.

• PhNumberLabel: String

  • Phone number, e.g., +1 8069754245

 

You can integrate the Google Map view in the UI-View (CSHTML)  of this Block.

 

This block should be able to be integrated into any page and display the water leakage details on the page.

 

You can add the block in any two or more pages of the Alloy site.

 

You can freely define the UI style/layout of the block.

Resources for learning

Getting started guide: https://world.episerver.com/documentation/developer-guides/CMS/getting-started/

Page types and templates: https://world.episerver.com/documentation/developer-guides/CMS/Content/Page-types-and-templates/

Block types and templates: https://world.episerver.com/documentation/developer-guides/CMS/Content/Block-types-and-templates/

Final Submission Guidelines

Submit a zip archive, including

• The video that shows your submission meets all the requirements above. Please upload your video elsewhere (like in Youtube, Google Drive, Dropbox etc) and share the link in your submission. In the video, please show or drag & drop this block in any page type and display the water leakage details on the page. 

• The source code of your submission, you will need to modify the code of the created sample Alloy site.

• A simple README about how to deploy and run your submission.