Box

    This is a component that defines the layout of child components. You can also include a box in a box.

    API Type

    Server API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request

    Parameter Type Required Description
    type string Y Set this parameter to box.
    layout string Y The layout style of components in this box.
    For more information, see Direction of placing components in “How to Place Components and Adjust Child Components.”
    contents array of objects Y Components in this box. Here are the types of components available:

    ○ When the layout property is horizontal or vertical:
    box, button, image, text, separator, filler, and spacer (not recommended)
    ○ When the layout property is baseline:
    icon, text, filler, and spacer (not recommended)

    Components are rendered in the order specified in the array.
    backgroundColor string N Background color of the block. In addition to the RGB color, an alpha channel (transparency) can also be set. Use a hexadecimal color code. (Example:#RRGGBBAA)

    The default value is #00000000.
    borderColor string N Color of box border. Use a hexadecimal color code.
    borderWidth string N Width of box border. You can specify a value in pixels or any one of none, light, normal, medium, semi-bold, or bold.
    none does not render a border while the others become wider in the order of listing.
    cornerRadius string N Radius at the time of rounding the corners of the border. You can specify a value in pixels or any one of none, xs, sm, md, lg, xl, or xxl.
    none does not round the corner while the others increase in radius in the order of listing.

    The default value is none.
    width string N Width of the box. For more information, see Width of a box in “How to Place Components and Adjust Child Components.”
    height string N Height of the box. For more information, see Height of a box in “How to Place Components and Adjust Child Components.”
    flex number N The ratio of the width or height of this component within the parent box. For more information, see Width and height of components in “How to Place Components and Adjust Child Components.”
    spacing string N Minimum space between components in this box. The default value is none. For more information, see spacing property of the box in “How to Place Components and Adjust Child Components.”
    margin string N Minimum space between this component and the previous component in the parent element. For more information, see margin property of the component in “How to Place Components and Adjust Child Components.”
    paddingAll string N Free space between the borders of this box and the child element. For more information, see Box padding in “How to Place Components and Adjust Child Components.”
    paddingTop string N Free space between the border at the upper end of this box and the upper end of the child element. For more information, see Box padding in “How to Place Components and Adjust Child Components.”
    paddingBottom string N Free space between the border at the lower end of this box and the lower end of the child element. For more information, see Box padding in “How to Place Components and Adjust Child Components.”
    paddingStart string N Free space between the border at the left end of this box and the left end of the child element. For more information, see Box padding in “How to Place Components and Adjust Child Components.”
    paddingEnd string N Free space between the border at the right end of this box and the right end of the child element. For more information, see Box padding in “How to Place Components and Adjust Child Components.”
    position string N Reference position for placing this box. Specify one of the following values:

    relative : Use the previous box as reference.
    absolute : Use the top left of parent element as reference.

    The default value is relative. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetTop string N The top offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetBottom string N The bottom offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetStart string N The left offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetEnd string N The right offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    action object N Action performed when this image is tapped. Specify an action object.

    Request Example

    
    {
      "type": "bubble",
      "size": "kilo",
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Welcome to the team!",
            "color": "#222222",
            "weight": "bold",
            "size": "md",
            "align": "center"
          },
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "image",
                "url": "https://i.ibb.co/26nhYVF/06-thomas-business-hr-staff.png",
                "size": "sm",
                "aspectMode": "cover",
                "align": "center"
              }
            ],
            "margin": "xxl",
            "cornerRadius": "50px",
            "borderWidth": "1px",
            "borderColor": "#22222220",
            "height": "60px",
            "width": "60px",
            "offsetStart": "85px",
            "offsetEnd": "85px"
          },
          {
            "type": "text",
            "text": "Kyle Baron",
            "weight": "bold",
            "size": "lg",
            "margin": "md",
            "align": "center"
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "text",
                "text": "kylebaron@designer.com",
                "size": "sm",
                "color": "#666666",
                "wrap": true,
                "align": "center"
              }
            ]
          },
          {
            "type": "text",
            "text": "Please edit your detail information.",
            "color": "#aaaaaa",
            "size": "sm",
            "wrap": true,
            "align": "center",
            "margin": "lg"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "Edit Profile",
              "uri": "https://worksmobile.com"
            },
            "color": "#2432AB"
          }
        ],
        "flex": 0
      }
    }