### Conditional Navigation Example Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/sessionInfo.html Provides an example of conditional navigation based on user authentication status. If authenticated, a 'View Tasks' link is shown; otherwise, a 'Sign In' link is displayed. ```HTML @if (session.Authenticated) { [View Tasks](@env.resource/tasks) } @else { [Sign In](@env.resource/login) } ``` -------------------------------- ### Request Information Example Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/sessionInfo.html Shows how to access request-specific session information such as the last URL, IP address, referer, and user agent. ```HTML @session.LastURL @session.LastIP @session.LastReferer @session.LastUserAgent ``` -------------------------------- ### WebStencils ForEach Example Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/keywords.html Demonstrates iteration over elements using the @@ForEach keyword in WebStencils. ```WebStencils @@ForEach (item in enumerator) @@ // Code to execute for each item @@end @@ ``` -------------------------------- ### WebStencils Switch Example Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/keywords.html Provides an example of the @@switch keyword for conditional execution based on an expression's value. ```WebStencils @@switch (expression) @@ @@case value1 @@ // Code for case 1 @@case value2 @@ // Code for case 2 @@default @@ // Default code @@end @@ ``` -------------------------------- ### Session Properties Example Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/sessionInfo.html Displays various session properties including ID, authentication status, user name, roles, creation and access times, timeout, and access count. ```HTML @session.Id @session.Authenticated @session.UserName @session.UserRoles @session.CreatedTime @session.AccessedTime @session.AccessedCount @session.Timeout ``` -------------------------------- ### WebStencils Comments Example Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/keywords.html Demonstrates how to use comments in WebStencils, which are ignored in the output HTML. ```WebStencils @@* This is a comment *@@ @@* This is another comment *@@ ``` -------------------------------- ### Run Docker Container with Persistent Storage Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/Delphi/README.md Run the WebStencils demo application in a Docker container with persistent storage for logs and data. Mount host directories to container paths for logs and data. ```bash docker run -d -p 8080:8080 \ -v /host/path/to/logs:/app/logs \ -v /host/path/to/data:/app/data \ --name=webstencils-demo \ webstencils-demo:latest ``` -------------------------------- ### Task List Iteration and Import Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/partials/tasks/list.html This snippet demonstrates how to iterate over a collection of tasks and import a partial view for each task item within a RAD Server Web Stencils application. ```HTML @* This is the partial view for the task list *@ @ForEach (var Task in Tasks.AllTasks) { @Import partials/tasks/item { @Task } } ``` -------------------------------- ### Product Catalog Loop Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/products.html Iterates through a list of products to render individual product cards. Imports a partial template for each product. ```Delphi @ForEach (var product in products) { @Import partials/product-card { @product } } ``` -------------------------------- ### WebStencils Dot Notation for Value Access Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/basics.html Demonstrates accessing values using dot notation in WebStencils. ```WebStencils @Import partials/codeBlock { @code = @codeDotNotation } ``` -------------------------------- ### WebStencils Code Block Import Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/basics.html Imports a partial code block for demonstrating WebStencils syntax. ```WebStencils @Import partials/codeBlock { @code = @codeAtSymbol } ``` -------------------------------- ### Iterating and Displaying Customer Data in a Table Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/customers/table.html This snippet shows how to loop through a list of customers and render their properties in table cells. It assumes a 'customers' collection is available in the scope. ```HTML @forEach (var customer in customers) { } ``` ```HTML Company Last Name First Name City Phone Email ``` ```HTML @customer.id @customer.company @customer.last_name @customer.first_name @customer.city @customer.phone @customer.email ``` -------------------------------- ### Conditional Navigation and Welcome Message Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/SessionManager/templates/mainLayout.html Conditionally renders navigation links and a welcome message based on the session's authentication status. Use this to personalize the user experience. ```Delphi @LayoutPage baseLayout * [Home](/) * [Authenticated](/authenticated) * [Only Admin](/admin) @if (session.Authenticated) { * Welcome, @session.UserName Log Out } @else { * [Login](/login) } ``` -------------------------------- ### WebStencils Conditional Execution (if/else) Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/keywords.html Implement conditional logic using @@if and @@else keywords for controlled execution paths. ```WebStencils @Import partials/codeBlock { @code = @codeIfAndElse } ``` -------------------------------- ### Product Card HTML Partial Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/product-card.html This HTML partial uses Razor syntax to dynamically display product information. It binds to a 'product' object to populate fields like image URL, category, rating, name, description, price, and stock availability. ```html @product.ImageUrl @product.Category ★ @product.Rating ### @product.Name @product.Description $@product.Price @if (product.Stock > 0) { In Stock } @else { Out of Stock } ``` -------------------------------- ### Customer Table Iteration and Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/customers/table.html Iterates over a list of customers to display their details in a table. Uses conditional rendering for fields that might be empty. ```HTML @forEach (var customer in customers) { } ID Company Name Location Phone Email Actions #@customer.id @customer.company @if(customer.country) { @customer.country } @customer.first_name @customer.last_name @if(customer.gender) { @customer.gender } @customer.city @if(customer.address) { @customer.address } @if(customer.postal_code) { @customer.postal_code } @if(customer.phone) { [@customer.phone](tel:@customer.phone) } @else { - } @if(customer.email) { [@customer.email](mailto:@customer.email) } @else { - } [](@env.resource/customers/edit?id=@customer.id "Edit Customer") ``` -------------------------------- ### Iterate and Display Users Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/users.html Loops through a collection of users and imports a partial view for each user's card. This is used to display a list of system users. ```Delphi @ForEach (var user in users) { @Import partials/user-card { @user } } ``` -------------------------------- ### Reusable Components with @@Import and Aliases Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/templates.html Demonstrates using the @@Import directive to create reusable components and pass iterable objects. Aliases can be defined for more agnostic component definitions. ```html @@Import components/card as Card
@@for item in @Model.Items { }
``` -------------------------------- ### Initialize Bootstrap Tooltips Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/customers/table.html Initializes Bootstrap tooltips for elements with the 'data-bs-toggle="tooltip"' attribute after the DOM is fully loaded. ```JavaScript // Initialize tooltips document.addEventListener('DOMContentLoaded', function() { var tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); }); ``` -------------------------------- ### Import User Card Partial Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/users.html Imports a partial view named 'user-card' to render individual user details. This partial is intended to be used within a loop. ```Delphi @Import partials/user-card { @user } ``` -------------------------------- ### Anonymous Method with TMap Type Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/AnonymousMethods/templates/BaseLayout.html Injects environment variables using a TMap type for configuration. Use this when defining specific key-value pairs for environment settings. ```html APP_VERSION = `@env1.APP_VERSION` DEBUG_MODE = `@env1.DEBUG_MODE` ``` -------------------------------- ### Product Card Partial Import Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/products.html Imports a partial template named 'product-card' to display individual product details. This is used within the product loop. ```Delphi @Import partials/product-card { @product } ``` -------------------------------- ### Specify Layout Page with @@LayoutPage Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/templates.html Use @@LayoutPage in a content page to define the layout template for that page. Place it at the top of the content file. ```html My Page

Welcome!

This is the content of my page.

@@LayoutPage layouts/mainLayout ``` -------------------------------- ### WebStencils Iteration (ForEach) Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/keywords.html Use @@ForEach to iterate over elements within an enumerator, enabling repetitive tasks. ```WebStencils @Import partials/codeBlock { @code = @codeForEach } ``` -------------------------------- ### Header/Body/Footer Template Pattern Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/templates.html An alternative to the standard layout pattern where each page is an individual template, sharing common parts like headers and footers. ```html @@Import partials/codeBlock { @code = @codeHeaderBodyFooter } ``` -------------------------------- ### Growth Rate Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/analytics.html Displays the growth rate metric with a positive percentage change. ```HTML/Delphi 📈 ### Growth Rate +15.3% Compared to last month ``` -------------------------------- ### Pagination Links Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/partials/pagination.html Renders pagination links based on the current page number and total pages. Includes logic for displaying '...' for distant pages and navigation arrows. ```HTML * [«](@env.Resource/@pagination.Uri?page=@\(pagination.PageNumber - 1\)&pageSize=@pagination.PageSize) * [1](@env.Resource/@pagination.Uri?page=1&pageSize=@pagination.PageSize) @if (pagination.PageNumber > 3) {* ... } @if (pagination.PageNumber > 2) {* [@(pagination.PageNumber - 1)](@env.Resource/@pagination.Uri?page=@\(pagination.PageNumber - 1\)&pageSize=@pagination.PageSize) } @if ((pagination.PageNumber > 1) and (pagination.PageNumber < pagination.TotalPages)) {* [@pagination.PageNumber](@env.Resource/@pagination.Uri?page=@pagination.PageNumber&pageSize=@pagination.PageSize) } @if (pagination.PageNumber < pagination.TotalPages) {* [@(pagination.PageNumber + 1)](@env.Resource/@pagination.Uri?page=@\(pagination.PageNumber + 1\)&pageSize=@pagination.PageSize) } @if (pagination.PageNumber < pagination.TotalPages - 2) {* ... } @if (pagination.TotalPages > 1) {* [@pagination.TotalPages](@env.Resource/@pagination.Uri?page=@pagination.TotalPages&pageSize=@pagination.PageSize) }* [»](@env.Resource/@pagination.Uri?page=@\(pagination.PageNumber + 1\)&pageSize=@pagination.PageSize) ``` -------------------------------- ### Tailwind CSS Build Script Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/README.md This batch script executes the Tailwind CSS standalone CLI to process input CSS, generate an optimized output CSS file, and minify it. It also specifies which files to scan for Tailwind class usage. ```batch @echo off REM Ensure tailwindcss.exe is in the tools directory IF NOT EXIST "tools\tailwindcss.exe" ( echo ERROR: tailwindcss.exe not found in tools\ directory. echo Please download it from https://github.com/tailwindlabs/tailwindcss/releases/latest exit /b 1 ) REM Define input and output paths SET INPUT_CSS=src\input.css SET OUTPUT_CSS=templates\static\css\output.css SET CONTENT_PATHS=templates\**\*.html REM Create output directory if it doesn't exist IF NOT EXIST "templates\static\css\" MKDIR "templates\static\css\" REM Run Tailwind CSS CLI echo Building Tailwind CSS... "tools\tailwindcss.exe" -i %INPUT_CSS% -o %OUTPUT_CSS% --minify --content "%CONTENT_PATHS%" IF %ERRORLEVEL% NEQ 0 ( echo ERROR: Tailwind CSS build failed. exit /b 1 ) echo Tailwind CSS build complete. Output: %OUTPUT_CSS% ``` -------------------------------- ### Dynamic Input Rendering by Data Type Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/dynamicInput.html Renders HTML input elements dynamically based on the field's data type. Includes attributes like 'maxlength' and 'step' for numeric types, and handles boolean and memo types specifically. Error display is also included. ```HTML (WebBroker) @if(field.visible) { @field.displayLabel @if(field.required) { * } @switch(field.dataType) { @case "ftInteger" { 0) {maxlength="@field.size"} step="1"> } @case "ftSmallint" { 0) {maxlength="@field.size"} step="1"> } @case "ftLargeint" { 0) {maxlength="@field.size"} step="1"> } @case "ftWord" { 0) {maxlength="@field.size"} step="1"> } @case "ftFloat" { 0) {maxlength="@field.size"} step="0.01"> } @case "ftCurrency" { 0) {maxlength="@field.size"} step="0.01"> } @case "ftBCD" { 0) {maxlength="@field.size"} step="0.01"> } @case "ftDate" { } @case "ftDateTime" { } @case "ftTime" { } @case "ftBoolean" { @field.displayLabel } @case "ftMemo" { 0) {maxlength="@field.size"} rows="3">@field.Value } @case "ftWideMemo" { 0) {maxlength="@field.size"} rows="3">@field.Value } @default { 0) {maxlength="@field.size"}> } } @if(fieldErrors.HasError(field.fieldName)) { @(fieldErrors.GetError(field.fieldName)) } } @else { } ``` -------------------------------- ### Navigation and Authentication Conditional Rendering Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/C++/SessionManager/templates/mainLayout.html This snippet shows how to implement navigation links and conditionally render content based on the user's authentication status using Razor syntax. ```HTML @LayoutPage baseLayout * [Home](/) * [Authenticated](/authenticated) * [Only Admin](/admin) @if (session.Authenticated) {@* Welcome, @session.UserName Log Out } @else {@* [Login](/login) } @RenderBody * * * ``` -------------------------------- ### Session Information Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/C++/SessionManager/templates/mainLayout.html This snippet displays key session details such as authentication status, session ID, username, and user roles using Razor syntax. ```HTML #### Session Info Authenticated: @session.Authenticated Session ID: @session.Id User: @session.UserName Role: @session.UserRoles ``` -------------------------------- ### Fully Anonymous Method Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/AnonymousMethods/templates/BaseLayout.html Injects environment variables using a fully anonymous approach. This is suitable for simpler or more direct variable injection without explicit type mapping. ```html APP_VERSION = `@env2.APP_VERSION` DEBUG_MODE = `@env2.DEBUG_MODE` ``` -------------------------------- ### Import External Files with @@Import Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/templates.html Use @@Import to merge an external file into the current template, enabling the creation of reusable components and structured templates. File extensions can be omitted if a default is defined. ```html @@Import partials/header
@@RenderBody
@@Import partials/footer ``` -------------------------------- ### Displaying Session Information Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/SessionManager/templates/mainLayout.html Displays details about the current user session, including authentication status, session ID, username, and roles. Useful for debugging or providing user context. ```Delphi * * * #### Session Info Authenticated: @session.Authenticated Session ID: @session.Id User: @session.UserName Role: @session.UserRoles ``` -------------------------------- ### Displaying Stat Title and Value Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/stats-card.html Displays the 'Title' and 'Value' properties of the 'stat' object. Ensure these properties are populated with relevant data. ```Delphi @stat.Title @stat.Value ``` -------------------------------- ### Rendering Main Content Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/SessionManager/templates/mainLayout.html Includes the main content of the page. This directive is used to render the body of the current page within the layout. ```Delphi @RenderBody ``` -------------------------------- ### Tech Badge Partial Import Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/products.html Imports a partial template named 'tech-badge'. This is typically used to display technology-related information or badges. ```Delphi @Import partials/tech-badge ``` -------------------------------- ### Average Session Duration Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/analytics.html Displays the average session duration metric. ```HTML/Delphi ⏱️ ### Avg. Session 4m 32s Average session duration ``` -------------------------------- ### Conditional CSS Loading in WebStencils Template Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/README.md This snippet shows how to conditionally load Tailwind CSS based on the build environment. In debug mode, it uses a CDN; in release mode, it links to a locally generated CSS file. ```html Tailwind CSS Demo @if (env.debug) { } @else { }

Hello, Tailwind CSS with Delphi!

This is a styled paragraph.

``` -------------------------------- ### Conversion Rate Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/analytics.html Displays the overall conversion rate metric. ```HTML/Delphi 🎯 ### Conversion 2.8% Overall conversion rate ``` -------------------------------- ### Navbar HTML Structure with Conditional Rendering Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/navbar.html This HTML snippet defines the structure of a navigation bar. It includes conditional rendering for a welcome message based on user authentication status and navigation links. ```html Navbar Example ``` -------------------------------- ### WebStencils HTTP Query Parameter Access (query) Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/keywords.html Read HTTP query parameters using the @@query keyword. Ensure the parameter is present in the URL. ```WebStencils @Import partials/codeBlock { @code = @codeQuery } ``` -------------------------------- ### Analytics Metrics Loop Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/analytics.html Iterates through a collection of analytics metrics, dynamically rendering labels, values, and percentages. Includes conditional rendering based on metric color. ```Delphi @LayoutPage mainLayout Analytics ========= View detailed analytics and metrics @ForEach (var metric in analyticsMetrics) { @switch (metric.Color) { @case "blue" { } @case "green" { } @case "yellow" { } @default { } } ### @metric.LabelText @metric.Value @metric.Percentage% @switch (metric.Color) { @case "blue" { } @case "green" { } @case "yellow" { } @default { } } } ``` -------------------------------- ### Add Data with Attributes and AddModule Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/components.html Use the [WebStencilsVar] attribute on class members and the AddModule method to automatically add marked members as script variables to the WebStencils Engine. Ensure members are objects with a GetEnumerator method; records are not supported. ```delphi type TMyDataClass = class private [WebStencilsVar] FMyField: string; [WebStencilsVar] procedure MyMethod; public constructor Create; end; procedure TMyWebModule.WebModuleCreate(Sender: TObject); begin inherited; WebStencilsEngine1.AddModule(TMyDataClass.Create); end; ``` -------------------------------- ### Add Data with [WebStencilsVar] Attributes Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/components.html Use `AddModule` to automatically add members marked with the `[WebStencilsVar]` attribute as script variables. This is useful for exposing multiple fields, properties, or methods from a class to templates. Ensure the class has a `GetEnumerator` method. ```Delphi procedure TMyWebModule.WebModuleCreate(Sender: TObject); begin inherited; WebStencilsEngine1.AddModule(Self); // Assuming Self has [WebStencilsVar] members end; ``` -------------------------------- ### Displaying Stat Icon Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/stats-card.html Renders an icon associated with the statistic. The specific icon is determined by the 'Icon' property of the 'stat' object. ```Delphi @stat.Icon ``` -------------------------------- ### WebStencils Page Property Access (page) Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/keywords.html Access page properties and connection details using the @@page keyword. ```WebStencils @Import partials/codeBlock { @code = @codePage } ``` ```WebStencils @Import partials/pageInfo ``` -------------------------------- ### Dynamic HTML Input Generation Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/FireDACMetadata/templates/Input.html This template snippet generates HTML input elements dynamically based on field metadata. It handles different data types like integers, dates, booleans, and memos, applying appropriate attributes such as 'maxlength' and 'rows'. ```HTML/Delphi Templating @if(field.visible) { @field.displayLabel @if(field.required) { * } @switch(field.dataType) { @case "ftInteger" { 0) { maxlength="@field.size"} step="1"> } @case "ftDate" { } @case "ftBoolean" { @field.displayLabel } @case "ftWideMemo" { } @default { 0) { maxlength="@field.size"}> } } } @else { } ``` -------------------------------- ### Dynamic Customer Form Generation Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/customers/form.html Iterates through customer fields to render either a country select input or a dynamic input field based on the field name. This snippet is used for building forms dynamically from database metadata. ```HTML @forEach(var f in customers.fields) { @if (f.fieldName = "COUNTRY") { @import partials/countrySelect { @field = @f } } @else { @import partials/dynamicInput { @field = @f } } } ``` -------------------------------- ### Customer Delete Confirmation Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/customers/edit.html Handles the delete button click event, prompting the user for confirmation before submitting the delete form. ```javascript document.getElementById('deleteBtn').addEventListener('click', function() { if (confirm('Are you sure you want to delete this customer? This action cannot be undone.')) { const form = document.getElementById('customerForm'); form.action = '@env.resource/customers/delete'; form.method = 'post'; form.submit(); } }); ``` -------------------------------- ### Render Page Content with @@RenderBody Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/templates.html Use @@RenderBody in a layout template to specify where the content from a specific page should be inserted. This is typically found in a base layout file. ```html @Page.Title

My Website

@@RenderBody
``` -------------------------------- ### Dynamic Select Field Rendering Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/dynamicSelect.html Renders a select dropdown for a field if it's visible. It displays the label, a required marker, populates options from a lookup dataset, and shows validation errors if present. ```HTML (Delphi WebBroker) @if(field.visible) { @field.displayLabel @if(field.required) { * } Select... @forEach(var record in field.LookupDataSet) { @(record.FieldByName(field.LookupKeyFields).Value) } @if(fieldErrors.HasError(field.fieldName)) { @(fieldErrors.GetError(field.fieldName)) } } @else { } ``` -------------------------------- ### Health Check Endpoint Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/Delphi/README.md Access the health check endpoint of the WebStencils demo application to monitor its status. This is useful for automated health monitoring. ```bash curl http://localhost:8080/health ``` -------------------------------- ### Dynamic Form Field Generation with FireDAC Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/C++/FireDACMetadata/templates/BaseLayout.html This template iterates over FireDAC customer fields to generate input components. It dynamically creates form elements based on the metadata of the fields. ```HTML @forEach(var f in customers.fields) { @import ../../templates/Input { @field = @f } } ``` -------------------------------- ### Render Body Directive in Layout Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/templates.html Use @@RenderBody in a layout template to indicate where the content from a specific page should be inserted. ```html @@RenderBody ``` -------------------------------- ### Add Data with Anonymous Methods Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/components.html Use `AddVar` with anonymous methods to provide data to templates. This allows for dynamic data generation at runtime. Ensure the method returns an object with a `GetEnumerator` method. ```Delphi procedure TMyWebModule.WebModuleCreate(Sender: TObject); begin inherited; WebStencilsEngine1.AddVar(procedure begin Result := TMyDataObject.Create; // ... initialize Result ... end); end; ``` -------------------------------- ### WebStencils Negative Conditional Execution (if not) Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/keywords.html Utilize @@if not for executing code blocks only when a condition is false. ```WebStencils @Import partials/codeBlock { @code = @codeIfNot } ``` -------------------------------- ### Add Data with Anonymous Methods Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/components.html Use AddVar with anonymous methods to pass data to WebStencils templates. This allows for dynamic data generation at runtime. Ensure the method returns an object value; records are not supported. ```delphi procedure TMyWebModule.WebModuleCreate(Sender: TObject); begin inherited; WebStencilsEngine1.AddVar('mydata', function: TObject begin // ... create and return data object ... Result := TMyDataObject.Create; end ); end; ``` -------------------------------- ### Switch Operator for Status Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/C++/SwitchOperator/templates/BaseLayout.html Use the switch operator to conditionally render text based on the 'status.Name' variable. This is useful for displaying user-friendly status messages. ```WebStencils Switch Operator =============== **Status:** @switch(status.Name) { @case "a" { active }@case "i" { inactive }@case "p" { pending }@case "s" { suspended }@case "m" { maintenance } @default { unknown } } ``` -------------------------------- ### WebStencils Comments Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/keywords.html Use @@* *@@ to enclose comments, which are excluded from the generated HTML. ```WebStencils @Import partials/codeBlock { @code = @codeComments } ``` -------------------------------- ### JavaScript Function to Change Pagination Size Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/pagination.html Resets the current page to 1 and updates the 'pageSize' parameter in the URL when the page size is changed. ```JavaScript function changePagination(pageSize) { const urlParams = new URLSearchParams(window.location.search); urlParams.set('pageSize', pageSize); urlParams.set('page', '1'); // Reset to first page when changing page size window.location.search = urlParams.toString(); } ``` -------------------------------- ### Conditional Color Rendering Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/stats-card.html Renders different content or applies different styles based on the 'Color' property of the 'stat' object. Use this for visual differentiation of card types. ```Delphi @switch (stat.Color) { @case "blue" { } @case "green" { } @case "red" { } @default { } } ``` -------------------------------- ### Conditional Change Display Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/stats-card.html Conditionally displays the 'Change' value based on whether the 'ChangeType' is 'increase' or not. This is useful for showing performance metrics. ```Delphi @if (stat.ChangeType = "increase") { @stat.Change } @else { @stat.Change } vs last month ``` -------------------------------- ### Add Data with Direct Object Assignment Source: https://github.com/embarcadero/webstencilsdemos/blob/main/RADServerProject/resources/html/components.html Use AddVar to pass data from Delphi code to WebStencils templates via direct object assignment. Ensure objects have a GetEnumerator method returning an object value; records are not supported. ```delphi procedure TMyWebModule.WebModuleCreate(Sender: TObject); var MyData: TMyDataObject; begin inherited; MyData := TMyDataObject.Create; // ... populate MyData ... WebStencilsEngine1.AddVar('mydata', MyData); end; ``` -------------------------------- ### Country Select HTML Partial Source: https://github.com/embarcadero/webstencilsdemos/blob/main/WebBrokerProject/resources/html/partials/countrySelect.html This snippet defines the HTML structure for a country selection dropdown. It conditionally displays the label and a required indicator, iterates through a list of countries to populate the options, and shows error messages if present. ```html @if(field.visible) { @field.displayLabel @if(field.required) { * } Select... @forEach(var record in countries) { @record.country } @if(fieldErrors.HasError(field.fieldName)) { @(fieldErrors.GetError(field.fieldName)) } } @else { } ``` -------------------------------- ### Conditional Field Rendering in FireDAC Metadata Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/C++/FireDACMetadata/templates/Input.html Renders an input field based on its visibility and data type. Includes conditional rendering for required fields and specific input types like integers, dates, booleans, and memos. ```html @if(field.visible) { @field.displayLabel @if(field.required) { * } @switch(field.dataType) { @case "ftInteger" { 0) { maxlength="@field.size"} step="1"> } @case "ftDate" { } @case "ftBoolean" { } @case "ftWideMemo" { } @default { 0) { maxlength="@field.size"}> } } } @else { } ``` -------------------------------- ### Navbar Mobile Menu Toggle JavaScript Source: https://github.com/embarcadero/webstencilsdemos/blob/main/FeatureDemos/Delphi/TailwindCSS/templates/partials/navbar.html This JavaScript snippet handles the functionality for toggling the mobile navigation menu when the hamburger icon is clicked. It updates ARIA attributes for accessibility. ```javascript (() => { const toggle = document.getElementById('nav-toggle'); const menu = document.getElementById('nav-menu'); if (!toggle || !menu) return; toggle.addEventListener('click', () => { const expanded = toggle.getAttribute('aria-expanded') === 'true'; toggle.setAttribute('aria-expanded', String(!expanded)); menu.classList.toggle('hidden', expanded); }); })(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.