Run your apps on any device with Responsive Forms & Omnis Studio 8.1

Responsive design is a technique used to design form layouts that cater to different devices or screen sizes, including mobile phones, tablets, and desktop screens. The motivation for employing responsive design is to create a single form, with one set of code methods, that adapts its layout automatically when it is displayed on a range of different devices, or when the client browser is resized. For standard web pages, responsive design is implemented using CSS media queries and breakpoints, and the new responsive design in Studio 8.1 takes a similar approach by allowing you to specify a number of layout breakpoints in a single JavaScript remote form: in this case, each layout breakpoint corresponds to a different layout for the same set of fields and controls on your remote form which changes as the device width changes.

In Studio 8.1 JavaScript remote forms have a new property called $layouttype, which for all new remote forms is set to the Responsive Type (kLayoutTypeResponsive) which provides a form layout with a default set of breakpoints, as shown in the form toolbar (existing remote forms will be set to kLayoutTypeScreen corresponding to the old screensize property, or you can set a form to kLayoutTypeSingle which may suit a desktop browser only app). The layout breakpoints in a new remote form are set to 320, 768, and 1024 which correspond to the relative widths for phones, tablets and desktop computers.

Adding JavaScript Controls

You can add JavaScipt controls to a responsive form from the Component Store and set their properties, in exactly the same way as in previous versions. When you add a control to a responsive remote form it is added to the current layout breakpoint and all other breakpoints: initially, a control will be in the same position in all layouts, but you can switch to another layout and change its position and other properties for that layout. If you delete a control from one layout it will be removed from all other layouts. The size (left, top, etc) and various other properties ($align, $edgefloat, $dragborder, $errortextpos, and $visibleinbreakpoint) are stored for a component for each layout breakpoint. A responsive remote form generates a new event, evLayoutChanged, when the responsive layout breakpoint changes.

Remote Form created by Wizard in Studio 8.1

Remote Form created by the Remote Form Wizard in Studio 8.1: the 768 layout breakpoint is shown.

The Remote Form wizard in Studio 8.1 has been updated so all new remote forms have layout breakpoints defined and all the components have their edgefloat properties set up automatically to cater to different screen types and devices. The final version of the tutorial library (Pics2.lbs) contains a remote form created using the new Remote Form wizard which you can examine to see how layout breakpoints and edgefloat properties can be used together to create responsive forms.

Remote Form Migration

Existing users will be glad to know that there is a migration tool, to allow you to convert existing remote forms to the new responsive form type. The migration tool creates new layout breakpoints corresponding to the old screen sizes available in remote forms in previous versions, and tries to adjust the positioning and layout of fields to fit those breakpoints. The migration tool creates a new responsive remote form with breakpoints and modified screen layouts, based on an existing remote form, and retains the old unmodified form in your library.

More information

Click here for more information about Responsive remote forms in Studio 8.1.

Try it for yourself

If you would like to try the new responsive features in Omnis Studio 8.1, as well as all the new features in this latest release, you can download a 90-day free trial version:

www.omnis.net/download/evalform.jsp

Existing users on a support contract (ODPP membership) should have already received their upgrades to Studio 8.1 by this time. If for some reason, you did not receive the upgrade, please contact your local sales office:

www.omnis.net/contact/

0 Comments

Leave a reply

© Omnis Software Ltd 2017 - Help with setup and design by Ädelfors Consult ABSweden Disclaimer: Omnis Software disclaims any responsibility for or liability related to Software, or any content or advice, obtained through this site. IN NO EVENT WILL OMNIS SOFTWARE BE LIABLE FOR ANY INDIRECT, PUNITIVE, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES HOWEVER THEY MAY ARISE AND EVEN IF OMNIS SOFTWARE HAS BEEN PREVIOUSLY ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

Log in with your credentials

or    

Forgot your details?

Create Account