bcgov / bcgov/klamm

Feature Gaps in Kiln Renderer for Updated Klamm Template Support

Open
#334 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
3
Forks
1
Avg merge
19h 42m
Merged PRs (30d)
5

Description

This issue outlines features from the Klamm v2.1.0 form template schema that are not yet fully implemented in Kiln's `Renderer.tsx`, assuming the v1.0.0 translator will correctly convey the necessary data.

**Current Status (as of `Renderer.tsx` analysis):**
Kiln already provides robust support for nested repeaters, dynamic stylesheet/script loading, `webStyles`/`pdfStyles` for basic layout/visibility, conditional field visibility, and `saveOnSubmit` logic.

**Remaining Gaps:**

1. **Form Headers - Ministry Logo Display:**
* **Description:** The `ministry_id` is available in `formData.ministry_id`, but it's not currently used to render a ministry-specific logo in the form header.
* **Action Needed:** Implement logic to construct and display an image (`` tag) using `formData.ministry_id` as part of the image `src`.

2. **Form Footers - Dynamic Content:**
* **Description:** The `v2.1.0` template includes a `footer` property for dynamic content. Kiln's `Template` interface and rendering logic do not currently consume this to populate the form footer (e.g., `data-footer-text` attribute or visible footer element).
* **Translator Action:** Map `v2.1.0.footer` to a custom property (e.g., `_kilnFooterContent`) on the top-level `v1` output.
* **Kiln Action:** Update `Template` interface and rendering logic to display `formData._kilnFooterContent` in the footer.

3. **Container Legend/Title - Hierarchy-based Heading Levels:**
* **Description:** While container `Item`s have `label`s, there's no explicit rendering for these as distinct titles/legends, nor is there logic to dynamically assign HTML heading levels (`

`, `

`, etc.) based on container nesting depth.
* **Translator Action:** If desired, pass a custom `_kilnHierarchyDepth` property for each item.
* **Kiln Action:**
* Implement clear rendering of container labels (e.g., within a `` or a styled `div`).
* If `_kilnHierarchyDepth` is available, dynamically render labels using `h1`-`h6` tags based on depth.

4. **`readOnly` Functionality (Global and Field-Level):**
* **Description:** The `Template` interface has a `readOnly` flag, and `Item.conditions` can define a `type: 'readOnly'`. However, `Renderer.tsx` currently lacks logic to apply these `readOnly` states to disable form inputs, either globally or on individual fields.
* **Translator Action:** Ensure `v2.1.0` `Template.readOnly` is mapped (e.g., to `_kilnReadOnlyForm`) and `v2.1.0` `Item.conditions[type='readOnly'].value` is mapped (e.g., to `_kilnReadOnlyExpression`).
* **Kiln Action:**
* Integrate `formData._kilnReadOnlyForm` to disable all relevant form inputs.
* For individual fields, evaluate `item._kilnReadOnlyExpression` (using `eval`) and pass the `readOnly` prop to the respective Carbon components.

5. **`calculatedValue` Condition Handling:**
* **Description:** Kiln does not currently support `calculatedValue` conditions for fields. This means it cannot automatically make a field read-only and derive its value from a JavaScript expression based on other form states.
* **Translator Action:** Map `v2.1.0` `Item.conditions[type='calculatedValue'].value` to a custom property (e.g., `_kilnCalculatedExpression`) on the `v1` item.
* **Kiln Action:**
* Update `Item` interface to include `_kilnCalculatedExpression`.
* Implement logic to detect this property. When present, make the field read-only.
* Add `useEffect` or similar hooks to re-evaluate `_kilnCalculatedExpression` (using `eval`) and update the field's `formState` whenever relevant dependencies change.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with Renderer.tsx and its Template and Item interfaces, then inspect the v1.0.0 translator mappings described in the issue. Done means the renderer supports the ministry logo, dynamic footer, hierarchy-based container titles, global and field-level readOnly states, and calculatedValue updates using the mapped properties.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.