Content Type: Widget

Categories: User Interface

Groupbox widget that allows content in the header

<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">CustomGroupBoxWidget</h2><a id="user-content-customgroupboxwidget" class="anchor" aria-label="Permalink: CustomGroupBoxWidget" href="#customgroupboxwidget"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Custom group box widget for web</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Features</h2><a id="user-content-features" class="anchor" aria-label="Permalink: Features" href="#features"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>In addition to default groupbox, place content in the header.</li> <li>Optionally use a context attribute to control the expanded/collapsed state</li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Usage without context attribute</h2><a id="user-content-usage-without-context-attribute" class="anchor" aria-label="Permalink: Usage without context attribute" href="#usage-without-context-attribute"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">No specific installation. Just put your content in the header and body sections.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Usage with context attribute</h2><a id="user-content-usage-with-context-attribute" class="anchor" aria-label="Permalink: Usage with context attribute" href="#usage-with-context-attribute"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The context attribute will be ignored if <code>Collapsible</code> is set to <code>No</code>.</p> <p dir="auto">The attribute value will be used to set the initial expanded/collapsed state. The widget will also react to changes to the attribute value. If the user clicks the widget header or icon to toggle the expanded state, the widget updates the attribute value.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Header mode</h2><a id="user-content-header-mode" class="anchor" aria-label="Permalink: Header mode" href="#header-mode"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The default styling of the widget matches the header mode <code>Div</code> of the default groupbox widget. For using header (enlarged text) styles, make sure to style your header content similar to the default groupbox if you want to match the styling.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Styling</h2><a id="user-content-styling" class="anchor" aria-label="Permalink: Styling" href="#styling"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">The widget can work with the same classes Mendix provides for the default group box widget. To make this easier you can adjust the settings.json file to add design properties for the widget. The test project in the GitHub repository has an <a href="https://github.com/Itvisors/mendix-CustomGroupBoxWidget/blob/main/test/theme/settings.json">example</a></p> <p dir="auto">Have a look at the Mendix documentation page on <a href="https://docs.mendix.com/howto8/front-end/extend-design-properties-to-customize" rel="nofollow">design properties</a> for more information.</p> <p dir="auto">The design properties for the widget:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;itvisors.customgroupboxwidget.CustomGroupBoxWidget&quot;: [ { &quot;name&quot;: &quot;Style&quot;, &quot;type&quot;: &quot;Dropdown&quot;, &quot;description&quot;: &quot;Choose one of the following styles to change the appearance of the groupbox.&quot;, &quot;options&quot;: [ { &quot;name&quot;: &quot;Brand Default&quot;, &quot;class&quot;: &quot;groupbox-default&quot; }, { &quot;name&quot;: &quot;Brand Primary&quot;, &quot;class&quot;: &quot;groupbox-primary&quot; }, { &quot;name&quot;: &quot;Brand Inverse&quot;, &quot;class&quot;: &quot;groupbox-inverse&quot; }, { &quot;name&quot;: &quot;Brand Info&quot;, &quot;class&quot;: &quot;groupbox-info&quot; }, { &quot;name&quot;: &quot;Brand Success&quot;, &quot;class&quot;: &quot;groupbox-success&quot; }, { &quot;name&quot;: &quot;Brand Warning&quot;, &quot;class&quot;: &quot;groupbox-warning&quot; }, { &quot;name&quot;: &quot;Brand Danger&quot;, &quot;class&quot;: &quot;groupbox-danger&quot; }, { &quot;name&quot;: &quot;Transparent&quot;, &quot;class&quot;: &quot;groupbox-transparent&quot; } ] }, { &quot;name&quot;: &quot;Callout style&quot;, &quot;type&quot;: &quot;Toggle&quot;, &quot;description&quot;: &quot;Enable the groupbox callout functionality to highlight the importance of the groupbox.&quot;, &quot;class&quot;: &quot;groupbox-callout&quot; } ]"><pre class="notranslate"><code> "itvisors.customgroupboxwidget.CustomGroupBoxWidget": [ { "name": "Style", "type": "Dropdown", "description": "Choose one of the following styles to change the appearance of the groupbox.", "options": [ { "name": "Brand Default", "class": "groupbox-default" }, { "name": "Brand Primary", "class": "groupbox-primary" }, { "name": "Brand Inverse", "class": "groupbox-inverse" }, { "name": "Brand Info", "class": "groupbox-info" }, { "name": "Brand Success", "class": "groupbox-success" }, { "name": "Brand Warning", "class": "groupbox-warning" }, { "name": "Brand Danger", "class": "groupbox-danger" }, { "name": "Transparent", "class": "groupbox-transparent" } ] }, { "name": "Callout style", "type": "Toggle", "description": "Enable the groupbox callout functionality to highlight the importance of the groupbox.", "class": "groupbox-callout" } ] </code></pre></div> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Issues, suggestions and feature requests</h2><a id="user-content-issues-suggestions-and-feature-requests" class="anchor" aria-label="Permalink: Issues, suggestions and feature requests" href="#issues-suggestions-and-feature-requests"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a href="https://github.com/Itvisors/mendix-CustomGroupBoxWidget/issues">link to GitHub issues</a></p> </article></div>