---
# System prepended metadata

title: WRAP Learning Tasks

---

# Task 1 - Getting Started

Clone udb-wrap repo, and create your own repo with the site files

Read through the main ReadMe.md file, in the Root, and through all the Docs in /Docs - Make notes on anything that doesn't make sense, is incorrect etc.

Set up a new page in the CMS, with a few example Blocks, e.g. 1 Billboard Block, 1 Card Block, 1 Content Block

Create a new Block in the CMS, sticking to the conventions in Docs, called Webreality Promo Content Block

Content = Heading (string), Text (Simple RTE), Background Image, Primary Button Link (Single MultiUrl Picker).

Settings = Background Colour Picker, Section ID (string), Hide Block (bool), and a toggle to change the Heading tag from a h2, to a h3 - Look at the Compositions used on other blocks

Add this new block to the Block Picker used on all pages, with its own Thumbnail (Thumbnails are in /assets/block-editor)

To render this new block on a page, create a new Vm in Website.Models - details on how this can be done is in Docs\Projects\Website.Models.md Again, if something doesn't make sense or if more detail is required, make a note to discuss later.

Once the Vm has been created, render that block on the webpage - You can style it however you want, just make sure all the fields are pulled from the CMS.

# Task 2 - Create a new ViewModel & ViewComponent

Create a new ViewModel in Website.Models, and ViewComponent in Website.ViewComponents, for a **PagePreviewBlock**

Add a few new properties to this Vm, e.g. Title (string), Image (MediaWithCrops), Url (string) etc, this can be whatever, just try using different types

Create the partial which should follow our conventions so everything is routed properly

Render the ViewComponent with a 
- ViewModel with completely custom data
- ViewModel which uses data from an IPublishedContent (the VM should have a constructor which takes the IPublishedContent)
- ViewModel which uses data from a BlockListItem, and IPublishedContent - if a property is empty on the BlockListItem, it should take data from the IPublishedContent

# Task 3 - Event Listing Page

Create an Event Listing Page. This will require a **EventListing** and **EventInternal** doc type, with Templates. The Event Internal must have a **Start Date** & **End Date**

The Event Listing page should use a **EventDirectoryCardBlock** block, with its own ViewModel and ViewComponenet. That will mean you also need a **EventCardVm** with its own details, e.g. Heading, Text, StartDate, EndDate - look at the News Vms in Website.Models as a reference point.

The Event Listing page should pull through future events only - there are methods in Udb.Core to help with pulling these nodes, e.g. `.ToOrderedByUpcomingDate()` and `.IsUpcomingDate()`

The Event Internal page should have its own EventInternalContentBlock block, which isn't added via the CMS, but always displays on that template - refer to the NewsInternal View as a reference. This can be styled however you want, but must pull the relevant details, e.g. Heading, Text, StartDate, EndDate

# Task 4 - Event Blocks

Create a **EventDirectoryCardBlock** that can be added to any page - this should allow the user to select specific events, or display the next X upcoming events. Look at the NewsDirectoryCardBlock as an example of how the CMS block should be configured.

This Card Block should use its own partial. By default, Card Blocks will use the Code/Website/Views/Partials/Blocks/PageBlocks/CardBlocks/card-block.cshtml, but please create your own, if you use the correct naming conventions then this should be used instead of the default

# Task 5 - Your own block & component

Create your own component, this can be anything - This must have its own Vm, and a few properties to pull from the CMS.

Create a new Block, which uses that new Component Vm as a property type. This block can also be anything.

In the new block, have a property which pulls a value from the Page, or SiteSettings - this can be done by using the BlockItemContent attribute, details in the https://bitbucket.org/wrdev/udb-wrap/src/develop/Docs/Projects/Udb.Models.md and https://bitbucket.org/wrdev/udb-wrap/src/develop/Docs/Projects/Website.Models.md Docs

Render this block & child component in a new partial, style however you like