Updated sign with custom logic to add a sign.

Author: engijlr

16/umbraco-cms/customizing/back-office-signs.md

@@ -34,9 +34,13 @@ Using this binding lets the server determine which signs are present in the resp
 
 ## Displaying a Sign
 
-To display a Sign in the backoffice, you register an entitySign extension and bind it to one or more flags using the forEntityFlags property. If you're using an icon variant, you must set kind: "icon" and provide both meta.iconName and meta.label, so the UI has the necessary visual and accessible information to render.
+To display a Sign in the backoffice, you register an entitySign extension.
 
-Example:
+Typically, you’ll bind it to one or more flags returned in the server response using the `forEntityFlags` property. However, you can also provide your own logic to determine when a Sign should appear.
+
+If you're using an icon variant, set kind to "icon" and provide both meta.iconName and meta.label.This ensures the user interface has the necessary visual and accessible information to render the Sign correctly.
+
+### Example: Rendering an Entity Sign from a Server Flag
 
 ```typescript
 import type { UmbExtensionManifest } from "@umbraco-cms/backoffice/extension-registry";
@@ -58,8 +62,60 @@ export const manifests: UmbExtensionManifest = {
 };
 ```
 
-When an entity includes the Umb.IsProtected flag, this Sign appears next to it in the UI, indicating that the item is protected.
+When an entity includes the `Umb.IsProtected` flag, this Sign appears next to it in the UI, indicating that the item is protected.
+
+![Screenshot of Recently Created sign](../reference/images/protected-entity-sign.png)
+
+### Example: Rendering an Entity Sign with Custom Logic
+
+The following Sign appears next to any document created within the past week. This Sign isn’t controlled by server flags.
+
+```typescript
+import type { UmbExtensionManifest } from "@umbraco-cms/backoffice/extension-registry";
+import { UMB_DOCUMENT_ENTITY_TYPE } from "@umbraco-cms/backoffice/document";
+
+export const manifests: UmbExtensionManifest = {
+    type: "entitySign",
+    kind: "icon",
+    alias: "Umb.EntitySign.Document.RecentlyCreated",
+    name: "Recently Created Document Sign",
+    forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
+    element: () => import("./recently-created-sign.element.ts"),
+    meta: {
+        iconName: "icon-umbraco",
+        label: "Recently Created",
+    },
+};
+```
+
+And in `recently-created-sign.element.ts`:
+
+```typescript
+@customElement("umb-recently-created-sign")
+export class UmbRecentlyCreatedSignElement extends UmbLitElement {
+    @state() private _createDate?: string;
+
+    override connectedCallback(): void {
+        super.connectedCallback();
+        this.consumeContext(UMB_TREE_ITEM_CONTEXT, (ctx) => {
+            const item = ctx?.getTreeItem?.() ?? (ctx as any).item;
+            this._createDate = item?.createDate;
+            this.requestUpdate();
+        });
+    }
+
+    protected override render() {
+        if (!this._createDate) return null;
+        const created = new Date(this._createDate);
+        const weekAgo = new Date();
+        weekAgo.setDate(weekAgo.getDate() - 7);
+        return created > weekAgo ? html`<div>New</div>` : null;
+    }
+}
+```
+
+![Screenshot of Recently Created sign](../reference/images/custom-entity-sign.png)
 
 {% hint style="info" %}
-The client extension for backoffice signs will be available in Umbraco 16.4 / 17.0.
+The client extension for backoffice signs are available in Umbraco 16.4.
 {% endhint %}