Google „Lighthouse” PWA report of Codeless Platform demo application: https://demo.codeless.solutions/CodelessPlatform/

Note: You can check this report yourself, open the demo in Chrome or Edge browser, start DevTools, select Lighthouse and generate a report

 

 

 

Microsoft PWABuilder report of Codeless Platform demo application: https://demo.codeless.solutions/CodelessPlatform/

Note: You can check this report yourself, go to https://www.pwabuilder.com, enter “https://demo.codeless.solutions/CodelessPlatform” in Textbox for PWA URL and click Start.

 

 

 

Application installation

When PWA applications are opened in Chrome for desktop, you have an option to install the app on Windows:

 

 

 

The application running as a Windows desktop application:

 

 

 

The same application opened in Chrome for Android:

 

 

 

When PWA applications are opened in Chrome for Android you have an option to install an app on your Android device:

 

 

 

Android will ask you to confirm installation:

 

 

 

Application installed as Android application:

 

 

PWA application is like any other Android app:

 

 

The application running on Android device:

 

 

 

Responsive Design

 

“Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.”

Source: whatis.com

 

In Codeless Platform, workspace and all application forms are responsive. Responsiveness of the workspace is done by making the application menu and heading responsive.

 

Workspace on large (desktop) screen: 

 

 

 Workspace on medium (tablet) screen: 

 

 

 Workspace on small (phone) screen:  

 

 

 

Responsiveness of forms is done on the platform level where form caption, toolbar, filters etc. are responsive. Another level is the content level where responsiveness is achieved by using bootstrap CSS and responsive containers. 

 

Platform level 

Large screen: 

 

 

Note the position of form caption, filter, toolbar commands (specially AIRPLANE, CAR, TRUCK)

 

Small screen:

  

 

 

Note that the filter is hidden by default and that custom commands (AIRPLANE, CAR, TRUCK) are inside Actions.

 

Content level

 

Content level responsiveness is achieved by using bootstrap CSS during automatic form view generation. Every field has its own template that is used for generation.

Note that you can change templates if you want. For an example you can write a version that uses Flexbox layout instead of Bootstrap.

We have 4 cases that evaluate form 2 boolean variables: hasLabel and isResized

Let’s show this in example. We will change hasLabel and isResied for StringField:

 

1. hasLabel is true and isResied is false

 

Template:

        <!-- field-start: #name# -->
        <div class="row">
                <div class="col-sm-4 col-xs-12">
                        <div location="#name#-label">
                                <label>#displayName#</label>
                        </div>
                </div>
                <div class="col-sm-8 col-xs-12">
                        <div location="#name#">
                                <input type="text" id="#name#">
                        </div>
                </div>
        </div>
        <!-- field-end: #name# -->

 

Large screen: 

 

 

Small screen: 
 

 

Note that the label is on top of the field. This is because of the way the template is defined. If you are not familiar with bootstrap CSS, please read this first: https://www.w3schools.com/bootstrap/

 

2. hasLabel is true and isResied is true

 

Template:

        <!-- field-start: #name# -->
        <div class="row">
                <div class="col-xs-12">
                        <div location="#name#-label">
                                <label>#displayName#</label>
                        </div>
                </div>
                <div class="col-xs-12">
                        <div location="#name#">
                                <input type="text" id="#name#">
                        </div>
                </div>
        </div>
        <!-- field-end: #name# -->

 

Large screen: 

 

 

Note that the large screen label is on top of the field, this is because we have isResied is true, meaning that field is resized (takes the full width of the column).

 

Small screen: 

 

 

Note that this is the same as in the first case for small screens.

 

3. hasLabel is false and isResied is false

 

Template:

        <!-- field-start: #name# -->
        <div class="row">
                <div class="col-sm-4 col-xs-12">
                </div>
                <div class="col-sm-8 col-xs-12">
                        <div location="#name#">
                                <input type="text" id="#name#">
                        </div>
                </div>
        </div>
        <!-- field-end: #name# -->

 
Large screen: 

 

 

Small screen: 

 

 

  

4. hasLabel is false and isResied is true

 

Template:

        <!-- field-start: #name# -->
        <div class="row">
                <div class="col-xs-12">
                        <div location="#name#">
                                <input type="text" id="#name#">
                        </div>
                </div>
        </div>
        <!-- field-end: #name# -->

 
Large screen:

  

 Small screen: 

 

Responsive containers

 

In Form designer you can choose from four types of containers: 

 

  

 

1. Row

The row is Bootstrap row and it’s responsive by default

2. Tab

A tab is not responsive, if you have more tabs then it can be shown on the small screen, you can click the angle-left or angle-right icon to scroll content: 

 

 

 

 3. Accordion

Accordion is responsive by default as it’s with full width by default.

4. Responsive

Responsive is a special container that is Tab on a large screen and Accordion on a small screen.

 

Responsive on large screen is Tab: 

 

 

Responsive on small screen is Accordion: