Describe use of getConfigForm
#2751
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughDocuments a new "Using the built-in form editor" section in Changes
Sequence Diagram(s)Not applicable — documentation-only change. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Cache: Disabled due to data retention organization setting Knowledge Base: Disabled due to data retention organization setting 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
docs/frontend/custom-ui/custom-card.md (4)
323-324: Use “built-in” and tighten sentence grammarHyphenate “built-in” and remove the superfluous comma for clarity.
-### Using the builtin form editor -While one way to configure a graphical editor is to supply a custom editor element, another option for cards with relatively simple configuration requirements is to use the builtin frontend form editor. This is done by defining a static `getConfigForm` function in your card class, that returns a form schema, defining the shape of your configuration form. +### Using the built-in form editor +While one way to configure a graphical editor is to supply a custom editor element, another option for cards with relatively simple configuration requirements is to use the built-in frontend form editor. This is done by defining a static `getConfigForm` function in your card class that returns a form schema defining the shape of your configuration form.
334-360: Remove unused empty “name” from grid schemaThe grid container doesn’t need a name; keeping it empty is noise.
{ type: "grid", - name: "", schema: [
381-386: Add a note encouraging localization of labels and helpersEncourage authors to localize text instead of hardcoding strings.
- `computeLabel`: This function will be called per form field, allowing the card to define the label that will be displayed for the field. If `undefined`, Home Assistant may apply a known translation for generic field names like `entity`, or you can supply your own translations. - `computeHelper`: This function will be called per form field, allowing you to define longer helper text for the field, which will be displayed below the field. + +Tip: Prefer localized strings for labels and helper text instead of hardcoded values to support multiple languages.
381-384: Optional: Link to selector documentation for deeper referenceA link helps readers discover available selectors and options.
-- `schema`: This is a list of schema objects, one per form field, defining various properties of the field, like the name and selector. +- `schema`: This is a list of schema objects, one per form field, defining various properties of the field, like the name and selector. See the selector reference for available selector types and options. + +Reference: https://developers.home-assistant.io/docs/blueprint/selectors/Please verify the correct canonical link for selector documentation in this repo structure.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (1)
static/img/en/frontend/dashboard-custom-card-config-form.pngis excluded by!**/*.png
📒 Files selected for processing (1)
docs/frontend/custom-ui/custom-card.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/frontend/custom-ui/custom-card.md
[grammar] ~323-~323: Ensure spelling is correct
Context: ...tend card editor }); ``` ### Using the builtin form editor While one way to configure ...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~324-~324: Ensure spelling is correct
Context: ...onfiguration requirements is to use the builtin frontend form editor. This is done by d...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
There was a problem hiding this comment.
Pull Request Overview
This PR adds documentation for the getConfigForm function, which allows custom card developers to create visual configuration editors using Home Assistant's built-in form system rather than implementing custom editor elements.
- Documents the
getConfigFormstatic method and its return object structure - Provides a comprehensive example showing schema definition, selectors, and callback functions
- Explains how the visual editor can be conditionally enabled/disabled based on configuration validation
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Co-authored-by: Copilot <[email protected]>
Proposed change
We provide the
getConfigFormfunction in frontend for custom cards to develop a visual editor, but I don't think it's currently documented.Not a super detailed description of every possible option, but hopefully better than nothing.
Type of change
Checklist
Additional information
Summary by CodeRabbit