# PGD Directives **PGD Directives** allow developers to add **custom directives (custom attributes)** to any UI element in **ONEWEB Page Designer**.\ These directives behave as additional HTML properties and enable **advanced, dynamic UI behavior** that goes beyond standard configuration options. PGD Directives are commonly used to: * Control visibility dynamically * Bind values conditionally * Apply CSS classes based on state * Extend component behavior using Angular‑style directives *** ### How to Add a PGD Directive #### Step 1: Select the Target Element 1. Open your page in **Page Designer** 2. Click on the UI element you want to extend with a directive

Select an element on the page

*** #### Step 2: Open Directive Configuration 1. In the **Property Editor**, open the **Setting and Data** tab 2. Click **+ Add Directive**
3. Click the **Add (+)** icon

Add new directive row

*** #### Step 3: Define Directive Attribute and Value 1. Enter the **Directive Attribute** (e.g. `ng-hide`, `ng-class`, `ng-value`) 2. Select how the value is provided: * **Static value** * **Value from State** If using State, apply the following syntax: ``` {{State.parameterName}} ``` 3. Click **Done** to save the directive

Configure directive attribute and value

*** #### Step 4: Save and Verify 1. Save the page 2. Build the application 3. Inspect the rendered HTML to verify the directive has been added to the element

Directive reflected in HTML output

*** ### Common Uses of PGD Directives #### Conditional Visibility (`ng-hide`) Use `ng-hide` to show or hide elements dynamically based on conditions.

Hide element using ng-hide

*** #### Conditional Value Assignment (`ng-value`) Use `ng-value` to assign values to elements based on logic.

Set value using ng-value

*** #### Bind Values from State or Store PGD Directives can reference values from: * **Page State** * **Store**

Bind directive value from State or Store

*** #### Dynamic Styling (`ng-class`) Use `ng-class` to apply CSS classes dynamically based on State or Store values.

Apply CSS class dynamically using ng-class

*** ### Design Perspective As part of **Page Designer advanced usage best practices**: * Use PGD Directives only when standard properties are insufficient * Keep directive usage consistent and well‑documented * Avoid overly complex logic in directives * Prefer State‑driven conditions for clarity and maintainability PGD Directives provide **powerful low‑level control** over UI behavior while still working within the Page Designer framework. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/page-features/pgd-directives.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.