Responsive Design

  • Updated

Features

Mobile Detecting

Default Value
General

Cross-platform in production VF page

Example 214. Code

<apex:page ...>    ...
    <html>    <head>        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>        ...
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.min.js"></script>              
    </head>    <body>        ...
        <script type="text/javascript" src="https://.../portal.min.js"></script> 
        <link rel="stylesheet" type="text/css" href="https://.../portal.css"/>    </body>    </html></apex:page>

Status

Release Available

Status

Framework Name

2.7.1

Current

TBC

Automation Initial Data Seed

Default Value
General

Default navigation JSON and default style JSON are included in builder.js.

Users do not need to seed the navigationstructure table and the css_configuration table for new applications.

Status

Release Available

Status

Framework Name

2.7.1

Current

TBC

Responsive Layout Grid

Default Value
General

  • At this point, we only support two grid breakpoints: sm and md

  • If not specified, the field width is sm=12 (the full width)

  • In detail view, panel, and editable queue/card view, users can specify column grid width for each field.

  • In card view, users can specify a grid for each card.

Code JSON

Appearance

Example 215. Code JSON

"appearance": {
  "grid": {
    "field": {
      "AnnualRevenue": { "sm": 6 },
      "Industry": { "sm": 6 },
      "Name": { "sm": 12 }
      
    }
    
  }}
Responsive Layout Grid 1.png

Example 216. Code JSON

"appearance": {
  "grid": {
    "field": {
      "$default": { "sm": 6 }
      
    } }}
Responsive Layout Grid 2.png

Example 217. Code JSON

"appearance": {
  "grid": {
    "card": {"sm": 6 }
    
  }
}
Responsive Layout Grid 3.png
Status

Release Available

Status

Framework Name

2.9

Current

MUI

In This Article