repository·open-v1.9.39·Indexed 24 days ago
https://github.com/cloudtogo/pageplugA low-code development platform for professional developers to build web and mobile (WeChat Mini Program) applications. A localized and optimized version of Appsmith, PagePlug features high extensibility through JavaScript and seamless data integration. Documentation covers the Appsmith Design System, icon generation, Enterprise Edition (EE) overrides, and server-side ACL migration scripts.
PagePlug provides several core capabilities for rapid application development:
The appsmith-icons package provides a set of icons specifically designed for the Entity Explorer Panel. These icons serve as visual representations for various widgets, helping users identify components within the UI.
Available icon components include:
ButtonIconCheckboxGroupIconCheckboxIconCurrencyInputIconHeadingIconIconButtonIconInlineButtonsIconInputIconKeyValueIconMenuButtonIconModalIconParagraphIconPhoneInputIconRadioGroupIconSectionIconStatsBoxIconSwitchGroupIconSwitchIconTableIconToolbarButtonsIconZoneIconA Popover is a page overlay triggered by a button that displays additional interactive content. It is best used for supplemental interactive content that contains at least one focusable element.
The Select component supports several functional variations to suit different UI requirements:
Widget developers can define which properties are exposed to Appsmith developers. These properties represent the state of the widget.
Appsmith developers can then bind these properties to other entities using double curly braces {{ }}. This allows them to pass data into your widget or use your widget's state elsewhere. The platform evaluates the content within the braces, allowing for JavaScript manipulation.
Example of binding an Input property to a Text widget:
{{ Input1.text }}
Example of using JavaScript within a binding:
{{ Input1.text.toLowerCase() }}
A Popover consists of the following structural elements:
Esc key.Category tokens are mandatory for use throughout the platform and are structured to ensure consistency based on the component's category. The naming convention follows a specific hierarchical pattern to describe the token's purpose, scope, and visual properties.
Naming Pattern:
atom-category-component-kind-surface-state-presentational-attribute
| Segment | Description |
|---|---|
| Atom | The type of token (e.g., colors, spacing, typography). |
| Category | The functional category (e.g., action, response, control, content). |
| Component | The specific component (e.g., button, input, avatar). This is optional if the token is not component-specific. |
| Kind | The variant or importance level (e.g., primary, secondary, tertiary). |
| Surface | The part of the component being styled (e.g., surface, label, icon). |
| State | The component state (e.g., default, hover, active). |
| PresentationalAttribute | The visual property (e.g., bg, border, foreground). |
Example of a component-specific token:
If the Avatar component requires unique colors for its background and border that differ from the general category, the tokens would be:
--ads-v2-colors-content-avatar-surface-default-bg--ads-v2-colors-content-avatar-surface-default-border--ads-v2-colors-content-avatar-surface-default-bg
--ads-v2-colors-content-avatar-surface-default-borderUI rendering for plugins is controlled by two JSON files located in src/main/resources:
form.json: Defines the fields shown when a user creates a new datasource (e.g., credentials).editor.json: Defines the interface where users enter queries for execution.Use configProperty to map UI fields to the plugin's internal configuration object.
# form.json
{
"form": [
{
"sectionName": "Details",
"id": 1,
"children": [
{
"label": "DB Username",
"configProperty": "datasourceConfiguration.authentication.username",
"controlType": "INPUT_TEXT",
"isRequired": true,
"placeholderText": "",
"initialValue": ""
}
]
}
]
}
# editor.json
{
"editor": [
{
"sectionName": "",
"id": 1,
"children": [
{
"label": "",
"configProperty": "actionConfiguration.body",
"controlType": "QUERY_DYNAMIC_TEXT"
}
]
}
]
}The List component is used to display a set of interactive actions or choices in a uniform single-column layout. It is ideal for sidebars, navigation bars, or organizational lists where actions are directly accessible without additional user interaction (unlike a Menu component).
A List item typically consists of:
SegmentedControl is managed internally by the component. While you cannot control the state externally for every change, you can define a default value to be selected when the component is first rendered.ZIndex design token provides numerical values used to manage the layering of UI elements. By using these tokens, you can control the visual hierarchy and ensure specific elements (like navigation menus or modals) appear on top of other content. These tokens are part of the theme system and are typically applied via CSS variables or theme properties.