Appsmith

The Input component provides a text field for users to enter or edit text. It is commonly used in forms, modals, search bars, or cards for inputs like usernames, URLs, emails, and addresses.

Anatomy

An Input component consists of:

1. Label: Descriptive text identifying the field.
2. Placeholder text: Optional hint text displayed inside the field.
3. Input area: The interactive zone for text entry.
4. Description: Helper text used to communicate additional information or input state.

Best Practices

• Labels: Always provide clear and concise labels.
• Placeholders: Do not rely on placeholder text as the sole hint, as it disappears when typing. Use the Description for formatting guidance or nudges.
• Validation: Use the errorMessage prop to provide feedback when input is invalid or incomplete, explaining how to fix the error.

In the Appsmith ecosystem, Widgets are UI building blocks (similar to components in a design system) used to construct applications. They are a type of Entity.

Other core Entities include:

• Queries: Data fetching operations.
• APIs: External service integrations.
• appsmith.store: The platform's client-side storage.
• JS Objects: Custom JavaScript logic containers.

Widget developers create these UI components, while Appsmith developers consume them to build applications by configuring their properties and event handlers.

Widget developers can define Properties that represent the state of a widget. These properties allow Appsmith developers to bind data from other entities to the widget.

Appsmith developers use double curly braces {{ }} to evaluate content and access properties. This allows for both direct property access and JavaScript manipulation within the binding.

Examples of property binding:

• Direct binding: {{ Input1.text }}
• JavaScript manipulation: {{ Input1.text.toLowerCase() }}

WDS distinguishes between two types of spacing to manage layout density:

• Outer Spacing: Used for distances between significant UI elements in a composition (e.g., the gap between multiple input fields in a form).
• Inner Spacing: Used inside individual UI elements (e.g., padding) or between micro-elements within a component (e.g., the distance between an icon and its label text).

GraphQL supports two primary pagination patterns in Appsmith:

Offset-Based Pagination

Uses limit and offset to fetch chunks of data. This is ideal for standard table widgets where you can calculate the offset using (pageNo - 1) * pageSize.

Cursor-Based Pagination

Uses a cursor (often a string) to navigate through data. This is better for infinite scrolling. You typically store the endCursor from the pageInfo object in appsmith.store to use as the after variable in the next request.

# Cursor-based example
query GetProducts($first: Int!, $after: String) {
  products(first: $first, after: $after) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Variables:

{
  "first": 10,
  "after": {{appsmith.store.lastCursor || null}}
}

Appsmith Design System (ADS) uses a 4-point grid for all sizing and spacing. This means any defined height, width, padding, margin, or line height should be an even multiple of 4 (e.g., 4, 8, 12, 16, 20, 24, etc.).

Key concepts:

• Baseline: The horizontal line text aligns to, typically spaced at 4 or 8px intervals.
• Leading: The vertical space between baselines; should be an even multiple of the grid increment.
• Alignment: Positioning elements relative to each other and the grid to ensure consistency.

Default properties allow you to map a property to a 'default' version of itself (configured in the property pane). When a user provides a new value for the default property, it overrides the primary property.

Example: Mapping the text property to a defaultText configuration:

static getDefaultPropertiesMap(): Record<string, string> {
  return {
    text: "defaultText",
  };
}

The DatePicker component consists of several functional and visual elements:

• Input Elements: Input text, Input field, and a Calendar icon.
• Navigation: Previous and next month selectors, and a Year selector.
• Calendar Grid: Previous month date cells, Current date cells, Next month date cells, and Hovered cells.
• Selection States: Selected range start date, Selected range end date, and Selected range highlight.
• Visuals: Container elevation.

Callouts are used to communicate the system's response to a user or provide suggestions. Unlike toasts, which are transient, callouts are typically persistent unless the user explicitly discards them. They are used to emphasize information on a page through different visual 'kinds'.

Anatomy of a Callout:

1. Icon: Provides a visual cue for the notification type.
2. Action (optional): A tertiary button for addressing the notification or navigating to more details.
3. Close button (optional): Allows the user to dismiss the notification.
4. Message: The text providing detail and actionable steps.