LcS Exercise 

Prerequisites 

If you do not have an account create a new Trial account using the 60 Day free trial


In the following exercises you will be asked to create an end to end solution that utilises a large number of the out of the box Productivity features. These exercises are designed to increase your familiarity and understanding of the product.


Useful article are linked in the specific exercise parts but for all Knowledge Base articles use the link below



Exercise Overview 


You work for the Emerald City Council who want to start a new clean up the streets initiative. They have plans to release a graffiti reporting and removal solution that includes both a resident and field worker facing solution. 

You are to use OneBlink LcS to complete this request. 






Exercise 1 - 100 Level


FEATURES BEING ASSESSED

  • Form Basics - Create a simple form utilizing a number of form elements and features

  • Submission Event Basics - Create a basic Email + PDF submission event

  • App Basics - Create an App with the appropriate PWA configuration

    • Simple Styling - PWA Icon, Banner, Highlight Colors


This first exercise is designed to test your understanding of basic form and app building concepts. You will be assessed on how closely your form and app reflects the examples provided.



Part 1 - Form Basics


Emerald City has asked for a resident facing Graffiti Reporting form. So that residents can easily report any graffiti they see around the city.


Try to replicate the below Form as closely as possible.


Emerald City - Graffiti Reporting Form


Helpful articles

  • Productivity Overview

  • Forms

  • Build my first form


App Assets



Part 2 - Submission Event Basics


When the Graffiti Reporting form is submitted Emerald City wants an email to be sent to user@emeraldcity.gov with a PDF of the form submission. The Subject must include the reporters name and the PDF must include the date of the submission


Helpful article

  • Submission Events




Part 3 - App Basics


Emerald City is happy with the form that you have created and now needs an App that they can distribute to their residents. Create an Emerald City App for your Graffiti Reporting form.


Try to replicate the below App as closely as possible.


Emerald City - Graffiti Reporting App


Helpful articles

  • My Apps

  • Styling Guide

  • What is a Progressive Web App (PWA) anyway?



App Assets




Exercise 2 - 200 Level



FEATURES BEING ASSESSED

  • Building Complex Forms -  Use more advanced form concepts to create a more intelligent form

    • Multi-page - Seperate the form sections to clean up the user flow

    • Calculations - Calculate rate for contactor based on hours worked

    • Conditional Logic - Email Copy of submission to property owner

  • User & Permissions - Add a, App user and Team Member 

  • Advanced Styling - Customise the app with CSS


The purpose of this exercise is to build on the previous exercise by introducing more complicated Productivity features. 


Part 1 - Building Complex Forms


Emerald City is pleased with the resident facing app you have created for them. Now they need a way for their field workers to go out and remove the reported graffiti. Emerald City has asked you to create a Graffiti Removal App for their field workers. 


Try to replicate the below App as closely as possible.


Emerald City - Graffiti Removal App


Helpful article

  • Forms

  • Calculations

  • Conditional Logic


Part 2 - App Users & Team Members


To ensure that this form is not publicly accessible ensure that the ‘Allow Anonymous Submission’ switch is turned off. Since it is turned off the only people able to access the form will be dedicated app users. 


Add yourself and blake@oneblink.io as an App User to the Graffiti Removal app. 

Also add blake@oneblink.io to the Team Members as an Administrator.


Some helpful articles

  • Users




Part 3 - Advanced Styling


Emerald City likes their banner and logo on the app, but they would like their app to have a bit more style. 

Add the style sheet provided by Emerald City’s UX designer below into the app. 


Try to replicate the below App as closely as possible.


Emerald City - Graffiti Removal App


Some helpful articles

  • Styling Guide


Style Sheet Link




Exercise 3 - 300 Level 



FEATURES BEING ASSESSED

  • Environments - Create a testing environment

  • Roles - Create a new read only roll

  • Lookups - Use built in lookups to display your logged in user email address

  • Migrate Form - Make a change to a testing form and migrate it to production


This exercise is designed to touch on some of the advanced Productivity features. 


Part 1 - Environments 


Now that you have created your 2 apps, you External resident facing Graffiti Reporting, and you Internal field worker facing Graffiti Removal apps, you will need an area for further testing and future changes. 


Emerald City has requested a testing environment so that they can test the apps freely without affecting anything that is live and in production. Create a copy of the Production environment allowing Emerald City to test freely without affecting any of the worked completed thus far.


Helpful article

  • Environments



Part 2 - Roles


Emerald City has several users who need access to the Productivity Console so that they can view the submissions coming through from the Graffiti Reporting app. 


You will need to create a new Role called Submission Reader that only has access to read Submission History, all other permissions should be turned off or read only. 


Helpful article

  • Users




Part 3 - Lookups


Emerald City wants to ensure they are not only confirming the geolocation of the graffiti when it is being removed, but also gather the street address. One of your CivicOptimize developers was kind enough to create a data lookup that takes in the value of a location element and then populates an address field. 


In the testing environment created in Part 1, you will need to create the Street Address element and the location to address lookup in the lookup menu.

One you have created the lookup you will need to configure it in the form. 


The name of the Confirm Location element must be “location”.

The name of the Street Address element must be “FormatedAddress”.


Try to replicate the functionality in the below App as closely as possible.


Emerald City - Graffiti Removal Advanced Form



Helpful article

  • Lookups


Custom URL for location to address lookup


Part 5 - Migrate Form



Now that you have added the option set and lookup to the forms in the testing environment, Emerald City has asked you to migrate the form changes to the Production environment. 


Make sure that the lookup and option set is configured for both environments.


Helpful article




Congratulations!


You have completed the OneBlink LcS Exercise.