App Widget Schema Example

for illustration concept only

Example 1

{
  "name": { "en": "Widget Name" },         // Section title, Widget display name
  "settings": [                            // List of settings
    {
      "id": "setting-id",                  // Setting ID
      "type": "text",                      // Setting type (e.g., text, color_picker)
      "label": { "en": "Label Name" },     // Setting label
      "default": "Default Value"           // Default value
    }
  ],
  "blocks": [                              // Reusable content blocks
    {
      "type": "block-type",                // Block type
      "name": { "en": "Block Name" },      // Block name
      "settings": [
        {
          "id": "block-setting-id",        // Block setting ID
          "type": "image_picker",          // Setting type
          "label": { "en": "Image Picker" } // Block setting label
        }
      ]
    }
  ],
  "presets": [                             // Preset initial configuration
    {
      "name": "Default Preset Name",       // Preset name
      "blocks": [
        { "type": "block-type" }           // Preset block type
      ]
    }
  ]
}

Example 2

{
  "name": { 
    "en": "Widget Name", 
    "zh-hant": "小工具名稱" 
  },                                      // Section title, supports multiple languages (I18n)
  
  "settings": [                           // Configurable settings in the section
    {
      "id": "title",                      // Setting ID
      "type": "text",                     // Setting type: text
      "label": { "en": "Title" },         // Setting label
      "default": "Default Title"          // Default value
    },
    {
      "id": "background_color",
      "type": "color_picker",             // Setting type: color_picker
      "label": { "en": "Background Color" },
      "default": "#FFFFFF"                // Default value: white
    }
  ],
  
  "blocks": [                             // Reusable content blocks
    {
      "type": "image",                    // Block type
      "name": { "en": "Image Block" },    // Block name, supports I18n
      "settings": [
        {
          "id": "image",
          "type": "image_picker",         // Block setting type: image_picker
          "label": { "en": "Select Image" }
        }
      ]
    },
    {
      "type": "text",
      "name": { "en": "Text Block" },     // Block type and name
      "settings": [
        {
          "id": "content",
          "type": "text",                 // Block setting type: text
          "label": { "en": "Text Content" },
          "default": "Add your content here"
        }
      ]
    }
  ],

  "max_blocks": 5,                        // Maximum number of blocks allowed in this section

  "presets": [                            // Default preset configuration
    {
      "name": "Default Preset",           // Preset name
      "blocks": [
        { "type": "image" },
        { "type": "text" }
      ]
    }
  ],

  "ui_options": {                         // Visual configuration options
    "icon": "image",                      // Section icon
    "empty_blocks_content": {             // Message when no blocks are added
      "en": "No content blocks have been added yet."
    },
    "blocks_content": {                   // Block description
      "en": "Drag and drop blocks to reorder them."
    }
  }
}