Custom Widgets, Extensions, Theming, and Capstone

Mastering the Control LibraryModule 7The lesson guide, the walkthrough video, the knowledge check and the hands-on lab this sample was built from are on learnwisej.com — free, with an AI tutor in every lesson.

Open the course

This example is the Widgets section is a Wisej.Web.Widget named ratingWidget wrapping a small star-rating JavaScript library, with a message trace of the bridge in both directions, every rule on the server, theming through packaged CSS, and the capstone documentation. This folder is the whole Operations Console after module 7.

The source of this sample

iceteagroup/LearnWisej-SamplesMastering the Control Library Course/Module 7

Browse this folder on GitHub

Or clone it: git clone https://github.com/iceteagroup/LearnWisej-Samples.git — then open OperationsConsole.slnx in Visual Studio and press F5.

Run it

cd "LearnWisej-Samples/Mastering the Control Library Course/Module 7/OperationsConsole"
dotnet run -f net10.0 --urls http://localhost:5707

Then open http://localhost:5707 and select Widgets. Keep the browser console open — it should stay clean.

What to try

Action	What you should see
Open Widgets	five grey stars for Northwind Traders, "no saved rating yet"
Hover the stars	a gold preview, no server round trip
Click the 4th star	message trace ← JS→.NET ratingChanged {"value":4} then → .NET→JS setSaved 4; the ✓ Saved 4/5 badge; a Toast; green status; StatusBar Record: CUST-1042
In the browser console: app.getWidget("ratingWidget").fireWidgetEvent("ratingChanged", { value: "seven" }) (or 9)	the payload is rejected: amber status, an AlertBox with the reason, nothing stored, stars still clickable
Tick Simulate service failure, click a star	→ .NET→JS ratingClearSaved, red status, a friendly AlertBox, the widget stays editable. Untick and click again to recover
Resize the browser under 601 px	the stars shrink (Phone profile → .is-narrow)
Refresh on the ToolBar	the rating is re-read and pushed into the widget

Where things live

OperationsConsole/
├─ Sections/WidgetsPage.cs / .Designer.cs   ratingWidget, the WidgetEvent handler, the message trace
├─ Widgets/RatingInitScript.cs              loads the InitScript from the embedded resource
├─ wwwroot/rating.js                        the library: stars, gestures, a "change" event — no colours, no rules
├─ wwwroot/rating.css                       every colour and size as CSS variables; theme variants, .saved, .is-narrow
├─ wwwroot/rating-init.js                   the adapter (embedded InitScript): init / update / setSaved
├─ Models/RatingModel.cs, Services/RatingService.cs   TryNormalize (1..5, whole number), Save
└─ docs/WidgetDecision.md, WidgetContract.md, CapstoneNotes.md, DemoScript.md

Known simplifications

• The rating store is in memory and rates one fixed customer (CUST-1042).
• ratingWidget is a plain Wisej.Web.Widget on the page, the shape; production would use a subclass.