amis Low-Code Framework

repository·master·Indexed 12 days ago

https://github.com/baidu/amis

A front-end low-code framework that enables the generation of complex administrative pages using JSON configurations. It includes a core engine for rendering schemas, a formula engine (amis-formula) for expressions and templates, and specialized packages like office-viewer for Word and Excel rendering. The framework provides comprehensive APIs for managing renderers, localization, themes, and a wide array of action types for control flow and UI interactions.

Tokens
42.3K
Snippets
108
Records
176
Agent score
96%

What's inside amis

  1. Overview of office-viewer Word and Excel renderers

    master
    The office-viewer package provides renderers for Word and Excel files. Note that the interfaces are currently unstable and may change in future versions. It is recommended to refer to the provided examples for the most up-to-date usage patterns.
  2. Apply responsive overflow styles

    master

    The overflow utility classes support responsive design. You can apply different overflow behaviors for mobile and desktop by adding device prefixes to the class names:

    • m: for mobile devices.
    • pc: for desktop/PC devices.

    For example, to hide overflow on mobile but allow scrolling on desktop, you would use the appropriate prefixed classes.

  3. Use mathematical functions in amis-formula

    master

    The amis-formula package includes a variety of mathematical functions for numeric calculations.

    Basic Arithmetic & Comparison

    • ABS(num): Absolute value.
    • INT(num): Rounds down to the nearest integer.
    • MOD(num, divisor): Remainder of division.
    • POW(base, exponent): Base raised to the power of exponent.
    • SQRT(num): Square root.
    • PI(): Returns the constant $\pi$.
    • RAND(): Returns a random float between 0 and 1 (changes on every calculation).

    Aggregation Functions

    These functions can accept multiple arguments (num1, num2, ...) or a single array ([num1, num2, ...]).

    • MAX(num1, ...): Returns the largest value.
    • MIN(num1, ...): Returns the smallest value.
    • SUM(num1, ...): Returns the sum of all values.
    • AVG(num1, ...): Returns the average value.
    • LARGE(array, k): Returns the $k$-th largest value in a dataset.

    Rounding & Precision

    • ROUND(num[, numDigits = 2]): Rounds to specified decimal places.
    • FLOOR(num[, numDigits = 2]): Rounds down to specified decimal places.
    • CEIL(num[, numDigits = 2]): Rounds up to specified decimal places.

    Statistical & Specialized

    • DEVSQ(num1, ...): Sum of squares of differences from the mean.
    • AVEDEV(num1, ...): Mean absolute deviation from the arithmetic mean.
    • HARMEAN(num1, ...): Harmonic mean.
    • UPPERMONEY(num): Converts a number to Chinese uppercase currency characters.
    • LAST(array): Returns the last element of an array.
    // Examples
    ABS(-5) // 5
    SUM([1, 2, 3]) // 6
    ROUND(3.14159, 2) // 3.14
    RAND() * 100 // Random number between 0-100
  4. Apply responsive float styles with m: and pc: prefixes

    master

    The float utility classes support responsive design by allowing you to target specific breakpoints. Use the m: prefix for mobile styles and the pc: prefix for desktop styles. This allows you to change the layout (e.g., from no float on mobile to a float on desktop) as the viewport changes.

    <!-- Example: Float right on PC, but no float on mobile -->
    <img class="m:float-none pc:float-right ..." src="...">
  5. How Word rendering works in office-viewer

    master

    The Word renderer converts the XML format within .docx files into HTML.

    Pros and Cons:

    • Pros: Simpler implementation compared to Canvas rendering; allows for easy text selection and copying from the rendered page.
    • Cons: Does not guarantee 100% visual fidelity with the original .docx file. Certain complex features, such as text wrapping around images (图文环绕), are difficult to implement in HTML and may not render correctly.

    Unsupported Features:

    • WordArt (艺术字)
    • Fields (域)
    • Objects (对象)
    • WMF images (Note: For WMF support, you may need to use js-wmf).
  6. Understand expression and formula syntax in amis

    master

    amis distinguishes between two types of expressions used in properties like visibleOn or disabledOn:

    1. JS Expressions: Raw JavaScript code (e.g., data.a == 1). If a value is provided in this format without ${ and } wrappers, it is treated as a JS expression. In the editor, these are displayed in a standard text input.
    2. Formula Expressions: Expressions wrapped in ${ and } (e.g., ${a == 1 ? "1" : "2"}). These use the new formula syntax and are displayed using a dedicated formula editor.

    Key Rules:

    • The formula popup always uses formula syntax; it does not use template concatenation syntax.
    • If you delete a JS expression, you must switch to the new formula editor to use formulas.
    • When manually typing in a text field, if you want to use a literal $ sign without triggering formula logic, you must escape it as \$.
    // JS Expression (Old syntax)
    getSchemaTpl('expressionFormulaControl', {
      label: 'Old Syntax',
      name: 'var2',
      value: 'data.a == 1'
    }),
    
    // Formula Expression (New syntax)
    getSchemaTpl('expressionFormulaControl', {
      label: 'New Syntax',
      name: 'var3',
      value: '\${a == 1 ? "1" : a == 2 ? "二" : "three"}'
    })
  7. Use text functions in amis-formula

    master

    The amis-formula package provides functions for string manipulation and text processing.

    Extraction & Slicing

    • LEFT(text, len): Returns the leftmost len characters.
    • RIGHT(text, len): Returns the rightmost len characters.
    • MID(text, from, len): Returns a substring starting at from with length len.
    • LEN(text): Returns the length of the string.
    • LENGTH(textArr): Returns an array of lengths for a collection of strings.
    • TRUNCATE(text, maxLen): Truncates text to maxLen (e.g., amis.baidu.com becomes amis...).

    Transformation

    • LOWER(text): Converts to lowercase.
    • UPPER(text): Converts to uppercase.
    • UPPERFIRST(text): Capitalizes the first letter.
    • CAPITALIZE(text): Converts text to title case.
    • TRIM(text): Removes leading and trailing whitespace.
    • REPLACE(text, search, replace): Performs a full replacement of search with replace.
    • CONCATENATE(text1, text2, ...): Joins multiple strings.
    • PADSTART(text, num, pad): Pads the start of a string to a target length.

    Search & Logic

    • CONTAINS(text, searchText): Returns true if text contains searchText.
    • STARTSWITH(text, startString): Returns true if text starts with startString.
    • ENDSWITH(text, endString): Returns true if text ends with endString.
    • ISEMPTY(text): Returns true if the text is empty.
    • SEARCH(text, search, start): Returns the position of the first match.

    Formatting & Cleaning

    • ESCAPE(text): HTML escapes the text.
    • STRIPTAG(text): Removes HTML tags from the text.
    • LINEBREAK(text): Converts newlines (\n) to HTML <br/>.
    • SPLIT(text, delimiter): Splits a string into an array based on a delimiter.
    • BEFORELAST(text, delimiter): Returns everything before the last occurrence of a delimiter.
    • BASENAME(text): Returns the filename from a path.
    • UUID(length): Generates a UUID string (default length 32).
    // Examples
    LEFT("hello", 2) // "he"
    SPLIT("a,b,c", ",") // ["a", "b", "c"]
    STRIPTAG("<b>amis</b>") // "amis"
    PADSTART("6", 2, "0") // "06"
  8. Office Viewer Schema Sources

    master
    The office-viewer component utilizes schema files for rendering. The primary schema is derived from the ECMA-376 standard. Additionally, presetShapeDefinitions.xml is sourced from the LibreOffice core repository to support drawing shapes. Note that the official standard may contain omissions (such as the upArrow shape) which are addressed in this implementation.