Main features at a glance

Log in to DesignBais and from the Developer Tools home page select the Account Selection option from the top menu. Select the account that you wish to develop in and click the Go button.

From the Developer Tools side menu select the Responsive Design option. This expands into 3 options.

Forms Designer opens the Responsive Design Forms Designer.

Form Data Link opens a form that allows you to link field elements on a Responsive Design Form or Web Page to database fields and processes.

CSS Definition allows you to maintain a CSS file for use in DesignBais.

Select the Forms Designer option.

We recommend Google Chrome for the RD Form Designer.

Web site configuration: db.config

The db.config file resides in the admin sub-folder within the website folder. DesignBais uses the db.config file to determine how to connect to the database.

The default connection path is defined in what we call the null qcode entry point. This is the entry point shown to the right <entryPoint qcode="">. It is the recommended way to connect RD users. The normaluser could be set up to have a login form in which each user enters their user id and password and are then directed to their start account and start form. The start form should be an RD form.

The db.config file may contain multiple entry points. By using a "?ac=name" query string in the url used to access DesignBais you can direct DesignBais to commence in a particular account. See the example to the right <entryPoint qcode="website">. A url like:

192.111.111.122/dbnet/?ac=website

will find this entry point and connect to the database account named DBINETWEBSITE using the login credentials of user dbnetuser with password pwxxxxxxx.

The DesignBais user for the session, however, is taken from the loginPublicUser. So the WEBLOGON for the session will be in this example salesuser.

The rule to be followed by RD form designers is to ensure they are in the same database account as the database files they plan to use.

When publishing an RD form make sure that this is done in the account in which the application is to run. The publish step will create, or update, a record in the DBIFORMHTML file. In environments where there is more than one set of DesignBais accounts the developer should make sure that they are referencing the correct DBIFORMHTML file. The status bar displayed at the base of the forms designer tool shows the account name and the work folder name.

<entryPoint qcode="">
<loginHost>192.168.199.9</loginHost>
<BASUBROUTINE>BAWEBEXECNET</BASUBROUTINE>
<loginHostType>UNIVERSE</loginHostType>
<loginAccount>DBINETWEBSITE</loginAccount>
<loginUser>dbnetuser</loginUser>
<loginPassword>pwxxxxxxx</loginPassword>
<loginPublicUser>normaluser</loginPublicUser>
<requestTimeoutSeconds>30</requestTimeoutSeconds>
<debugUser>dbiwebsite</debugUser>
<enableXSSshield>false</enableXSSshield>
<allowDomainNamesInLoginNames>false</allowDomainNamesInLoginNames>
<convertLoginNamesToLowercase>true</convertLoginNamesToLowercase>
<enableDetailedErrorMessages>true</enableDetailedErrorMessages>
</entryPoint>

<entryPoint qcode="website">
<loginHost>192.168.199.9</loginHost>
<BASUBROUTINE>BAWEBEXECNET</BASUBROUTINE>
<loginHostType>UNIVERSE</loginHostType>
<loginAccount>DBINETWEBSITE</loginAccount>
<loginUser>dbnetuser</loginUser>
<loginPassword>pwxxxxxxx</loginPassword>
<loginPublicUser>salesuser</loginPublicUser>
<requestTimeoutSeconds>30</requestTimeoutSeconds>
<debugUser>dbiwebsite</debugUser>
<enableXSSshield>false</enableXSSshield>
<allowDomainNamesInLoginNames>false</allowDomainNamesInLoginNames>
<convertLoginNamesToLowercase>true</convertLoginNamesToLowercase>
<enableDetailedErrorMessages>true</enableDetailedErrorMessages>
</entryPoint>

Work Folders

From the File menu select Work Folder. Select the work folder in which to store your form. Click Set to confirm your choice.

Then either select Open to open an existing form or New Page to begin work on a new form.

If you are commencing a new form then select Save As to save the form. This will ensure that the form name that you want to use remains locked to prevent other users from using the name of opening the form.

New Work Folder

To create a new work folder press Ctrl+W to open the Set Work Folder form.

Enter the new folder name in the Selected field then click Set.

For example the folder xyz has been created.

Resources (images, css)

Creating a new work folder triggers the creation, in the website res (for Resources) folder, a folder with the name of the newly created work folder. Within this folder there are four sub-folders.

css - holds the css files for the work folder.

fonts - holds any required special fonts.

images - this is where you must place images that are used by your RD forms.

meta - holds http responses headers and javascript metadata.

Responsive Design Custom CSS

DesignBais creates a resource folder when a work folder is created as explained here for website DBNET:

DBNET URL: http://localhost/dbnet

DBNET Physical folder: c:\inetpub\wwwroot\dbnet

Create new RD Work folder: "sales"

DesignBais creates themes folder: c:\inetpub\wwwroot\dbnet\res\sales\css

This folder holds a number of preset theme files *.css

Copy any preset css file (e.g. navy.css) and paste with a new name in the same folder (e.g. sales.css): c:\inetpub\wwwroot\dbnet\res\sales\css\sales.css

Select "sales.css" as your theme using the menu File > Properties > Theme in RD Forms Designer.

You can then edit/modify sales.css (in Notepad) as necessary to make up your own theme.

Responsive Design Meta tags

Responsive Design Meta tags are used to add

custom javascript
custom css
other custom html meta tags to individual DesignBais RD pages.

This is an example of how Meta tags are used:

We want users to see the prompt "hello world!" when they navigate to http://localhost/dbnet/?dbpage=sales-fred
DBNET URL: http://localhost/dbnet
DBNET Physical folder: c:\inetpub\wwwroot\dbnet
RD Work folder: sales
RD page: fred
URL of fred: http://localhost/dbnet/?dbpage=sales-fred
Resource folder of "sales": c:\inetpub\wwwroot\dbnet\res\sales
Meta folder of "sales": c:\inetpub\wwwroot\dbnet\res\sales\meta
Create new meta file for page "fred" using Notepad: c:\inetpub\wwwroot\dbnet\res\sales\meta\fred.meta

The content of fred.meta can be a single line pointing to the location of a JS file as follows (note the src attribute starts with res/):<script src="res/sales/meta/somescript.js"></script>

Create script file using Notepad: c:\inetpub\wwwroot\dbnet\res\sales\meta\somescript.js
Script file content: $(document).ready(function(){alert('hellow world!')});
Users will see the prompt "hello world!" when they navigate to http://localhost/dbnet/?dbpage=sales-fred

Of course, we don't need custom javascript to display a simple "hellow world!" prompt in DesignBais but we're just showing how third party javascript libraries can be included and used in DesignBais if necessary.

Responsive Design Custom Fonts

You can use your existing font (ttf) files or download a new font file (ttf) from https://fonts.google.com/.

This is an example of using the custom font file named "grafiti.ttf" on a DesignBais RD page:

DBNET URL: http://localhost/dbnet
DBNET Physical folder: c:\inetpub\wwwroot\dbnet
RD Work folder: sales
RD page: fred
URL of fred: http://localhost/dbnet/?dbpage=sales-fred
Resource folder of "sales": c:\inetpub\wwwroot\dbnet\res\sales
CSS file of "sales": c:\inetpub\wwwroot\dbnet\res\sales\css\sales.css
Fonts folder of "sales": c:\inetpub\wwwroot\dbnet\res\sales\fonts

Save your grafiti.ttf file in your fonts folder: c:\inetpub\wwwroot\dbet\res\sales\fonts\grafiti.css

Edit your custom css file: c:\inetpub\wwwroot\dbnet\res\sales\css\sales.css to add the following at the top of the document:

@font-face{

font-family: grafiti;

src: url('fonts/grafiti.ttf');

}

h3 {

font-family: grafiti;

}

Open RD page fred. Use menu File > Properties > Theme to select "sales.css".

CTRL+K to create an HTML segment. Click the text "Lorem Ipsum" and CTRL+Q to edit.
In the HTML editor, click the text "Lorem Ipsum" and set it to "Heading 3" using the drop down. The text font will turn to grafiti.

Location of Images

Images can be placed directly in the images folder as shown here.

It is good practice to create sub-folders within the images folder so that images for a particular project or application can be grouped together. This makes the task of moving an application to a different environment easier, since all required images can be moved by copying the sub-folder.

See below where the sample form is created to see how to link an image to a field on a Responsive Design form.

Inserting elements on a page

The Responsive Design Forms Designer opens a new form by displaying an empty column.

In order to add an element to a form you need to insert a Form Row into the empty column since elements are housed within form rows. If you insert a column into the initial column you will see the column splits into two equal columns. But until a form row is present you cannot insert any of the ten form elements.

After inserting a form row into a column right click the form row. The menu now has a Form Row option which if selected displays the Insert Element option. Select the form element from the list.

HTML Text element

Select the HTML form element. Use this element when you want to display text or an image on your form.

All form elements must have an id.

This is the handle by which DesignBais identifies this element. It must be unique to the form. In many cases the RD Forms Designer will assign a unique id. It is recommended however that the developer assigns meaningful element ids because this makes the task of linking form elements to database fields much easier.

In this example the id is set to headerText.

Click OK to save the element definition.

Inserting Rows

Insert another row below the first row.

To do this focus on the existing column and right-click to display the menu options. Select Row then select Add New Row [Ctrl+D]. A new row will display above or below the existing row.

This highlights two aspects of the RD Forms Designer.

Firstly there are a number of short cut key options available. In this example pressing the Ctrl key and the D key together achieves the same result as using the Add New Row menu option.

Secondly, the postioning of the new row is controlled by the middle option of the RD Top Menu to the right of the File option. This allows you to specify whether the selected action is to insert before or after the focussed element.

Input text element

Focus on the new row. Press Ctrl+I to create a form row. Press Ctrl+M to create a Text Input form element.

Press Ctrl+P to display the properties of the form element.

Enter the Label Text, in this example First Name. In order to generate a meaningful element id click the auto icon at the right hand end of the id field. This generates the id of firstName based on the label text.

Enter the Place Holder text. Check the Event box if, when running the form, a server hit is required when the value in this field is amended. The effect of checking the Event box is to trigger a change event. If you specify the name of a subroutine in the Form Data Link option (see below) then any basic code that you want to run after this field is entered can be included in the validation event for this field.

Element added to the page

After completing all required fields on the four pages of the Input element maintenance form click OK to save your definition.

The result is shown. The First Name input field is displayed in the form row.

Shortcut Keys

Now add another Text Input field for the last name. This can be done using short-cut keys.

Focus on the row containing the First Name field. Then press combination keys as follows:

Ctrl+D - inserts a new row below the current row.

Ctrl+I - inserts a form row in the new row.

Ctrl+M - inserts a new Text Input form element into the form row.

Properties

Ctrl+P - opens the Input properties form.

Change the Label Text to Last Name.

Then click the auto icon to generate the id as lastName.

Change the Place Holder to Last Name.

Button

There are ten form elements that can be used on a Responsive Design form. We will add a button to our form so that we can save our First Name and Last Name to a database file.

Ctrl+D - add a new row.

Ctrl+I - insert a form row in the new row.

Ctrl+B - inserts a button into the row.

Ctrl+P - opens the button properties form.

Button properties

Set the button text to Save.

Auto generate will set the button id as save. We recommend that button ids be prefixed with b- in order to easily distinguish button element ids. This aligns with the DesignBais requirement that a non-RD form button name must commence with "B.".

Check the Event check box. This will cause the click of the button to generate a change event when we run the form.

Set the Button Type to Primary. This determines the style of the button.

Button alignment

Amend the Alignment from the default to text-center.

This places the button in the center of the form row below the first and last name fields.

Button groups

If we want three buttons on our form, all on the same row, and we want the buttons to be reasonably close together we can utilise the Button Grouping feature of Responsive Design.

Right-click the form row near the button. Select Column, then Grouping, then Center.

Then right-click and select Column, then Add Button.

Alternatively all the additional buttons can be created by pressing Ctrl+B several times as required.

Amend the properties of each additional button.

Events

In our example we now have buttons for Save, Clear and Delete.

Each button has the Event check box checked.

The final step in creating our getting started form is to link an image to the HTML header field at the top of our form.

HTML Editor

Right-click the top row of the form. Select Form Row then select Edit HTML [Ctrl+Q].

This will open the HTML Editor.

Image paths

Click the Source button.

Enter the html string shown below. Note that:

The name of your image must be prefixed with ../res
In this example the name of the image is gs3.png.
So the path to the image is " ../res/xyz/images/gs/gs3.png".

The width should be set as required.
alt can be set as required. This defines what will be displayed if the specified image cannot be found.

Key field

We need to add a key field to our form. Set the File menu option to Before. With focus on the first name field press Ctrl+D to insert a new row above the first name field. Then press Ctrl+I to insert a new form row. Press Ctrl+M to insert a text input field. Press Ctrl+P to set the properties of this Client Code field.

Our form is now ready to test. The form must be saved and published before it can be run. Use the short-cut keys Alt-S to save it and Alt-L to publish, or use the options on the File menu.

When a form is published a record is created, or updated if the form has been published previously, in the DBIFORMHTML file. The key of the record is "workFolder-formName". In our getting started example the record id will be "xyz-gsdemo".

A form can be executed by using the dbpage query string parameter.

Use a url with the name of your website, followed by the required query strings.

Example: http://192.111.111.111/yourWebsite/?ac=yourUser&dbpage=xyz-gsdemo

Page not found

Before a Responsive Design form can be run you must use the Form Data Link option to create a record in the DBIFORMS file. This step is explained next.

If this step is not done and you attempt to run the form the Page not available error will display.

Form Data Link

Select the Form Data Link option from the Developer Tools Responsive Design side menu.

The newly published form name will appear in the Page Name dropdown. Select the page.

A new page must be linked to a new Filename and Form Name. That is to say there must not be a forms record on DBIFORMS with a key formed from "Filename*Form Name". If there is, and that record is already linked to another RD form, then the error shown to the right will display.

Linking the fields

Enter a Filename and Form Name. This becomes the key to a record in DBIFORMS on which the database linking information for this RD form is stored.

For our getting started example we will link to file DBCLIENT and Form Name GSDEMO.

In the grid at the base of this form all the RD form elements are listed. It is now apparent why assigning meaningful names to the RD fields is important. It facilitates the task of finding form elements that need to be linked. The three input fields are linked to fields within the DBCLIENT file:

clientCode is linked to field DBC.CLIENT.CODE on file DBCLIENT. This field has atribute value of 0.

firstName is linked to DBC.FIRST.NAME attribute <91>

lastName is linked to DBC.LAST.NAME attribute <92>

Read of a Record

To invoke a read of a record from the clientCode field (linked to the DBC.CLIENT.CODE field) click the form element id in the ID column.

Enter the Read Group, Read Step, Read To Variable, File to Read and Read Type. These fields behave exactly the same as in a non-RD DesignBais form.

Submit the Form Data Link record.

Saving the data links

To complete the linking of the form click the Updating button.

Assign the B.SAVE button to Update From Button.

Set the Clear From Button to the B.CLEAR button.

Submit the Form Data Link record.

Running the finished form

Now we can run our getting started demo form.

Use a url with the name of your website, followed by the required query strings.

For our test the url is: http://192.111.111.111/yourWebsite/?ac=yourUser&dbpage=xyz-gsdemo

Enter a client code from the DBINET.DEMO client file DBCLIENT. Enter the first and last name, then save.

Re-enter the client code to retrieve the record and display the name fields.

Responsive test

The responsive design behaviour can be demonstated using Chrome's Responsive feature and selecting say iPhone X.

Note that the field labels move above the fields themselves.

We encourage you to now review the DesignBais Responsive Design Reference Manual which contains more detailed descriptions of the DesignBais Responsive Design tools.

Happy Designing!

Go to Top