CapeSoft NetTalk
WebServer Template  Reference

Each server listens on a "port". This allows multiple servers to run on the same machine. Only one program can be listening on a specific port at a time. That is how TCP/IP works. The default port number for normal web sites is 80. The default for secure websites is 443. The default for NetTalk examples is 88.

The port number you enter here will be used for this server (regardless of whether the server is SSL or not.) The common values (80 and 443) are just common values, you don't need to use them - your server can use any port you like.

However the browser knows about common values too, so when the port number is omitted from the URL it defaults to the common value. For example, http://www.capesoft.com is the same as http://www.capesoft.com:80 and https://www.clarionshop.com is the same as https://www.clarionshop.com:443. If you use an uncommon port number for your server then your users will need to explicitly use the port number when accessing the server. For example, the shipping examples all use port 88, so the URL to get to them (when running the browser on the same machine as the server) is http://127.0.0.1:88.  This is the name of your WebHandler procedure. the default name for this procedure is WebHandler, and it's a good idea to stick to the default name. This is the name of the web folder, typically a sub-directory of the application folder. Files in the web folder can be downloaded by the browser. It contains (in sub-folders) all the files that your site needs, like JavaScript files, CSS files, Images and so on. The default name is 'web'. This is the name of the html file, or procedure, which will be called when the URL does not contain an actual name. The default in most of the examples is 'Indexpage' which corresponds to a procedure in the app. This is the page that contains the Login form (if one exists). This is then called automatically when the user tries to access a page which requires them to be logged in (when they are not already logged in.) Typically this is a Form procedure in the app (but it could be a static HTM page.) If the Login Page is a NetWebForm procedure (which is recommended), then tick this option on. You are able to set the default date picture for the web site here. This value will be placed in p_web.site.DatePicture, which in turn can be used in any place where a date picture is required. This allows you to change the default date picture globally. You can make the date picture variable, or even set per-user, by setting the self.site.DatePicture property in the Webhandler procedure, ProcessLink method, before the parent call.

Note that date pictures up to D16 are supported. D17 and D18 specifically have no meaning in a web app, and are explicitly not supported. All generated pages consist of three parts. The header, the footer and the content body. Enter the name of the header procedure (usually a NetWebSource procedure) here, in "tag" form. For example if the procedure is called PageHeader then the tag is '<!-- Net:PageHeader -->'. The generic-header (and generic footer) are wrapped around NetWebBrowse, NetWebForm and NetWebYear controls when those controls are called as a stand-alone page. The generic header and footer can be overridden at the procedure level for specific browses and forms etc. See Generic-Page Header tag above. Tick this on to make use of the Content-Body feature. The Content Body is a DIV block around all the content between the header and the footer. It can make navigation through the application faster, and smoother. The page title is what the browser displays in the caption bar when looking at a specific page. You can set this at the procedure level, however you can enter a generic app name here for pages that do not have a specific title set. If this option is off, then the server will display error messages in a MESSAGE box to you as they occur. Most errors though, in the web context, are expected, and harmless. This option must be off for deployment, or your web server will stall when a message is displayed. However it can be useful to have this on when experiencing a problem in the server - especially a problem when deploying a new server (which you are struggling to connect to.)

Browse

If this is on the user can double-click on a browse row to open the form.

Form

If the user clicks on the Delete button on a FORM, then a message will be displayed asking them to confirm before the record is actually deleted. If the user is on a form, and clicks on the Cancel button, and some fields on the form have changed, then the user will get a confirmation message asking them to confirm the Cancel before the changes are abandonned.

Tick this on to allow the site to be served in either Desktop mode, or Mobile mode. If on then fixes the browse header at the top of the pane. If off then the header is fixed to the top of the page, and moves upwards as the user scrolls down the page. See Browses - Header Fixed above. See Browses - Header Fixed above. See Browses - Header Fixed above. This is used to detect if a connecting device is mobile or not. If a device connects to the server, and has a screen size greater than the resolution entered here, then the site will be served in Desktop mode, and not Mobile mode.

NetTalk contains default functionality that is based on JavaScript. If you are not using this functionality then it's a good idea to exclude these scripts from your application, as this will result in smaller JavaScript requirements, and therefore faster initial load times for the app. The various script options are listed below. NetTalk supports multiple WYSIWYG HTML editor scripts. By setting the default here (and using the default as the field level setting) it's easy to change the editor used by an application in one place. It also allows the setting to be applied at runtime, on a user-by-user basis allowing users to select the editor they prefer.
Note that you still need to include the possible scripts for the editors (including the default) in the settings below. The TinyMCE Editor is one of the offered HTML editors, which allow users to enter WYSIWYG HTML into a Text field in your app. Tick this option on if this is your preferred editor. Redactor is the other offered HTML editor. Use this one instead of (or in addition to TinyMCE) if you prefer it. Redactor supports the use of multiple languages. If you are using a language other than English you can enter the language code here. For more information on Redactor language codes see here. The Calendar script refers to the NetWebYear procedure type. If you have any NetWebYear based procedures in your application then tick this on. If not you can turn it off. This does not affect the date-lookup control at all. The Image Gallery is a Form Field type, which allows you to display one, or more, pictures in a gallery format. Tick this script on if you have a form with this field type. The Media script allows your page to contain non-HTML fields containing other media, like PDF files, sound, movies and so on. Read more about the Media control here. The File Upload script allows your user to upload files with a lot more feedback, and control than the native HTML file Upload field. If you allow your users to upload Files to your site, then you will probably want to make use of this feature. You can read more about File Uploading here. Work-in-progress - Do not tick this on for now. To make organization easier, all JavaScript files are grouped together for convenience. the default sub folder where this is done is the 'scripts' folder. You can change this if you like (but for various reasons, it's not recommended.)

Scripts

The Chrome menu and XP-TaskPanel menu types are deprecated and should no longer be used. However these are still included for backward-compatibility reasons. If you are using these menu types then either change to a new type, or tick this option on. (Remember to turn on the similar option on CSS tab as well.) See option for Chrome menu above. The app creates a batch file for combining and compressing the CSS and JS files. If you manually change these files, then you will want to re-run the batch file. You can do that from Windows Explorer, or by pressing this button.

Site Tab

Browse Tab

Form Tab

Calendar Tab

Files Tab

Buttons sets, when on, group like buttons visually together into a mini toolbar. The browse locator has the option for Search and Clear buttons. Tick this on to group these buttons together. First, Previous, Next and Last buttons. Insert, Copy, Change, View, Delete buttons. Select and Cancel buttons (when the browse is called as a lookup.) Save and Cancel buttons on a form.

Standard Buttons

Servers that use SSL encrypt the traffic between the server and the browser. This makes it possible to store, and transmit sensitive information, like credit card numbers. You can read more about making your site secure here. If you are making your site secure then you will need a certificate. It will be placed in your app\certificates folder. Enter the name part of the certificate here. For example, if the file is called settings.crt and settings.key, then you would enter just 'settings' here, without the extension. When you are creating an SSL only site, then it can be advantageous to also create a site on Port 80 which automatically redirects users to the SSL port. If this NetSimple Object is the Port 80 version of this setup, then tick this option on. If the above checkbox is on, then enter the port number of the SSL site here The default value is 443 Machines can, and do, have multiple IP addresses. If this option is on then clients will only be able to connect via a specific one of those addresses. If it is off then the server binds to all the addresses. Binding to just one address allows other programs to use the same port, on the same machine, by in turn binding to one of the other addresses. The number of characters in the string to use for the Session ID. Longer makes for bigger packets. Shorted makes for a lower security level. 20 is considered the minimal current "best practice" but NetTalk defaults to 30. Changing the session ID when the user logs in and out can prevent certain kinds of possible attacks on your users. By default this option is on. There is a distinct difference between a user being logged in or out, and their session. If you want the actual session to be deleted when they logout then tick this option on. Note however that you will need to take the user to a Logout page. You cannot delete the session underneath a form (and expect it to keep working.) So the practice of automatically logging a person out when they enter the Login form is not compatible with this option. If this option is on then a session is bound to the IP address that created it. This prevents a session from being hijacked. Unfortunately it can hinder access from clients that have a variable IP address, and so is off by default. This sets the maximum size for any file uploaded to the server. If your site is being hosted as a DLL by the HOST.EXE program then the Host program's setting will also apply. Files which are too large will be marked as "failed" on the form after the upload is started.
This setting is in Megabytes - ie if set to 5 then no files larger than 5 Megabytes in size will be accepted. NetTalk 6 introduced the notion of using a random string for the Session ID rather than a number. If you need to use a number then tick this option on. The strings offer more bits of security so it's a good idea to migrate to using strings as soon as you can.

JavaScript and CSS files are simpel text files, and can be combined (into all.js and all.css respectively). This improves performance of the site a lot, and can make initial load times much faster. However if this is on then you need to re-run GZIPALL.BAT after editing any of the source JS or CSS files. Thus is it usually off while developing the CSS or JS, and on for the rest of the time. Allows the server to search and serve xxx.yyy.gz when asked for the file xxx.yyy. If the .gz file exists then it will be sent to the client. This saves time compressing the file, but still delivers the file compressed to those browsers that can accept compressed files. Allows the server to compress, on the fly, static files which do not have the <!-- NetWebServer --> header. Files with the extensions SAF, ZIP, GZ, RAR, 7Z, JPG and PNG are not compressed (as these file types are already compressed). Most of the data travelling between the server and the browser is generated on the fly by the various procedures in your app. Tick this option on to allow this data to be compressed. This is a good idea for most situations because the bandwidth ("pipe size") between the server and client is usually the limiting factor. Of course compressing on the server, and decompressing on the client takes a bit of effort at both ends, but in almost all cases will be quicker than sending the data uncompressed. One small problem with .JS and .CSS files being cached in the browser is that they are not updated automatically when you update your server and web folder. The user typically will see an error message telling them to press Ctrl-F5. If this option is on, then the browser will test the validity of a cached file (.JS or .CSS) before using it. If the file is the same as the one in the cache then the server sends a small packet (305 Not Modified). Obviously this test can slow down the page a bit, but the balance is greater automatic compatibility with your changed files. The server is a single EXE handling multiple simultaneous users. Each user is thus allocated a unique Session ID so that data that belongs to that user can be stored with that user. Because users can leave without notice (by just closing their browser) a session timeout occurs after a period of inactivity. The length of this period is 15 minutes by default, but you can set it to anything you like. Note that each session consumes a small amount of resources (RAM) so it's not ideal to have an unsuitable large number of Sessions still active after they have been abandoned. The HTML Charset to use for the server. The default is 'utf-8' which is the most flexible, and most compatible charset to use. Clarion does not support utf-8 as a native type, so strings stored in utf-8 form cannot be displayed on normal Clarion screens or reports. Thus in most cases you will want to store the data set as a subset of utf-8 ,using a Windows code page. Select the one from the drop-down that most fits the language of your data. A local translation of the word "Locate" as used by the locator. See above. See above. See above. If this is off then the default version check between the NetTalk version used to generate the app, and the Version number in the netweb.js/all.js file is not done. If this is off then the screen-size of the client device is not sent to the server with each full page refresh. This is an experimental setting for a Work-In-Progress and should not be used at this time.

The name of the WebHandler object. Defaults to p_web (and its recommended you leave this name as-is.) The name of the WebHandler class - defaults to NetWebServerWorker.

Allows you to force the site into Desktop or Mobile mode. This is useful for testing.

A list of procedures in the application which the user must be logged in to access. Be careful not to make the LoginForm procedure one of these.

General Tab (String Field)

General Tab (Procedure Field)

General Tab (Date Field)

General Tab (Button Field)

CSS Tab

Edit Tab

Sort Tab

On Click Tab

Image Tab

Conditional Tab

Totaling Tab

Security Tab

Enter the condition for this filter here. If you are limiting the filter based on the place where the browse is used, then enter the parent procedure here.

These advanced options are only used in a small number of cases, and usually only by experienced developers. They are not recommended for normal use, or if you are a beginner. If the form is a static page, then tick this option on. Enter the URL of the form here. Optionally enter the frame name of the form here.

There are a number of standard buttons, which link to the form, that you can add to a browse. These buttons appear either above, or underneath the browse (as set on the options tab). In addition to these buttons you can also add "in row" buttons as a browse column. Tick this on to include this button. For example, if you want an Insert button under the browse, but not Change or Delete buttons (perhaps because you have those two in-row) then use this checkbox to determine which buttons you want. If the browse is called as a stand-alone page, and this option is on, then the Add button will appear inside the page header. This can remove the need for browse buttons completely (if you have in-row change or delete buttons) thus saving a lot of space. If the browse is embedded in another procedure, like a form, then the button appears as normal, even if this option is on. If the above option is on, and the Insert button is visible in the header, but you want the regular Insert button included as well, then tick this option on. When a browse is called in popup mode, then by default only the highlighted row is updated when the form closes. If you wish to refresh the whole browse though, then tick this option on. If this is on then the user will be able to double-click on a browse row, and go directly to the form for that row. Usually the program will display either the Change button, or the View button, depending on the access rights of the user. If you wish the View button to appear, even if the Change button is visible, then tick this option on. When deleting, if this option is on, then the user will need to click on a confirmation message before the record will be deleted. The text on the caption of the popup confirmation dialog. Defaults to 'Confirm'. The question asked of the user goes here. The text on the "yes" button - defaults to 'Delete'. The text on the "no" button - defaults to 'No'. By default the Select button is located to the right of the Update button when doing a select. Tick this option on to reverse that order. By default these buttons close the browse and return the user to the previous page. If you wish to override that behavior then you can enter a URL for them here. By default this button closes the browse and returns the user to the previous page. If you wish to override that behavior then you can enter a URL for the Close button here. The button will only be included (on the row and/or below the browse) is this condition is true. You are able to specify the form procedure to use, on a button-by-button basis. This allows you to, for example, use a different procedure for Inserts and Changes. You are able to use a different Form depending on the Row which is selected by the user. Enter the condition here. Enter the procedure here to use, depending on the condition above. For example a CLOSED invoice may have a different form to an OPEN invoice.

While you can set the default sort order here, it is better to set the default sort order based on one of the columns. You can do that on the Sort tab for the specific browse column. If you want the initial sort order to be unrelated to the columns, or if there is no column sorting, then set the default sort order here. The name of the field to sort on. Tick this on if this is a numeric field, or a string field that should be sorted in a case-sensitive way. Set the direction of the sort here.

The name of the Browse or NetWebSource procedure that will be a child of this Browse. Form procedures cannot be the child of a browse. A condition that must evaluate to true for the child to be displayed. If the child should be invisible when this browse is empty then tick this option on. If this option is on, and the browse is called in lookup mode, then this child will not be displayed. Set the position of the child, relative to this browse. Set the space the child should occupy, relative to this browse. See Span Columns. Set the CSS for the table cell containing the child browse.

This is the heading that appears on the Tab. If this condition is false then the tab is excluded from the form. Excluded tabs are not there - they cannot be hidden and unhidden. If this is off then this tab is excluded when the user is using the app in Mobile mode. A unique ID for the tab. This is a constant string so a variable or expression cannot be used. No quotes are required. An expression to determine if the tab is visible or not. A Use Equate must be set for this feature to work. CSS to be applied to the tab. If this is on then all the prompts, values and comments on this tab will be in a single column. If this is off then the tab is divided into (at least) 3 columns - on for the prompts, one for the values, and a third for the comments.

Field

Common Settings

Color

Email

File Upload

Map

Media

Procedure

Signature

String

Spinner

URL

Validation

CSS

Client Side

Security

Data is populated on the calendar via a loop. This might be the form of a loop through the data records in a table, or a loop through each date, reading data for each date. Alternatively you may wish to hand-code the loop yourself. Used to identify the data set in the data set list. If the loop type is set to dates, then set the From date here. Note that this can be an expression, such as a session value. See From Date above.

Where the months type has a minimum of one data set, there are at least three sets of data on a Planner type. A planner consists of three parts, the Left Column (also known as the Left Pane), the Right Column (where the actual interesting data lies) and the headers for the Right Column. While one of the Left or Header sets is usually just a progression of dates, or time, you can decide which one is most appropriate. Note that if a data table is used for the Left Column, or Right Header Column then this is considered to be the Parent Table. Choose one of Loop through Dates, Time, Table or Hand-code. A description for use on the data set list. Tick this on if this is the data set for the Left column. Set the header of the Left Column here. Tick this on if this is the data set for the Right Column Headers. If the Loop Type is set as Loop through Dates, then set the Date Boundaries here. See From Date above. If the Loop Type is Loop through Time then set the time allocated to each row here. This is in Clarion time, ie 1 hour = 360000.

the name of the table to loop through. The unique key for the table (usually the primary key). This is the same key as is used by the Form. The sort order for the table. Only applicable to planners, to the data which appears in the Right column. This field marks the field in this table which is linked to the Parent table (where the parent table is either the Left column, or Right Column Header set.) An optional filter for the table. The field in the table that contains the Date. this might be the From date (say in an employee leave record) or the single date (say in a public holiday record.) An optional field containing the from time field in the data An optional field identifying the End Date field. An optional field to indicate the end time for the data record. If no end date field is available, then possibly a field containing the duration (in days) exists. If no end time field exists, then possible a time duration field exists.

View fields are fields added to the View. This is the mechanism used to tell the template that a field will be needed, and should be fetched when looping through the data. the name of the field to fetch. A description of the field, for the field list.

The text that should be added to each cell. The text to display when the user hovers over each cell (that contains data.) An Image to display in the cell (when the calendar is in Big mode.) An Image to display in the cell (when the calendar is in Small mode.)

The CSS Style to apply to the cell. Tick this on if the style is linked to data in another table. the generated classed are created on the CSS Classes tab for the procedure. If this is on then be sure to set the settings there as well. The field in the current table which links to the primary key of the styles table. The table containing the styles. An alternative to using generated classes, use this if the data itself contains a field with the foreground color. Or any expression that will determine the color of this data set. See foreground Color above.

Enter the form procedure here that will be used to edit the data in this data set. Since the calendar can display multiple data sets, it follows that each form can have a different form. Tick this on if the form would be opened in Popup mode rather than Page mode. Only one data set can have this option on. If the user clicks on an empty cell, then this determines which data will be added. For example, if a calendar showed both employee leave information, and public holidays, and the user clicks on an empty cell, then a record can only be added to one of those tables. The choice is somewhat arbitrary, and will depend on the context of the page in the application. Records being display are Read Only (ie a form will not open when they are clicked) if this condition is false.

In many cases the colors used by the cells is based not on fixed styles in some CSS file, but rather on some data in the database. To accommodate this it is possible to generate styles on the fly. The generated style name is an s followed by the contents of the ID field below. The table containing the data. A filter for the table. The ID field in the table. If a string it must contain only alpha-numeric characters which are allowed in a CSS style name. The field containing the foreground color. The field containing the background color.

Other CSS Properties

Menus typically contain a collection of menu items. However some menu types also allow them to trigger behavior. Options that are duplicated at the Menu Item level are described there, so are not repeated here. The text to display for the menu. An expression which, when true, will allow the menu to be displayed. Some menus (like the Taskpanel menu) have an Open and a Closed state. By default menus are closed. An expression can be entered here - if true the menu will start in the Open state. The URL of a page or procedure to open when the menu itself is selected. URLS are always opened in Link mode. Not all menu types support linking directly from the menu name. If a URL is not specified then you can specify a Procedure instead. Parameters to be included in the call to the procedure, or URL. This is a standard URL parameter list of the form name=value&name=value&name=value etc. If set to Default then the setting for the menu extension is used. Alternatively you can specify Link, Content or Popup. If opened as a Popup this allows you to set the title of the Popup being opened. Allows you to set the Frame the page will open into. If a target is set then the item will be opened in Link mode. Some actual JavaScript code to execute when the menu is clicked.

Items - General Tab

Items - Image Tab

Defaults to 'nt-menu-div ui-corner-br' Defaults to 'nt-menu'

Defaults to 'nt-left' Defaults to '' Defaults to 'nt-padding-1'

Defaults to ' nt-width-150px' Defaults to 'accordionTabTitleBar' Defaults to 'accordionTabContentBox'

Defaults to '' Defaults to 'nt-mob-menu-div' Defaults to 'nt-mob-menu'

Note that the Chrome menu type is deprecated, so rather use one of the other menu types. Defaults to 'chromemenu' Defaults to 'DropMenu' Defaults to 'chromesep'

Note that the XP Panel menu type is deprecated, so rather use one of the other menu types. Defaults to 'dhtmlgoodies_xpPane' Defaults to 'dhtmlgoodies_panel' Defaults to 'panelContent' Defaults to 'panelInside' Defaults to ''. Include the unit (px or em) when specifying this value.

The number of items in the Contents field should match the number of rows or columns as specified above. Each division in a frameset can contain another frameset, or a frame. (Ultimately all the panes in the frameset are a frame.) If another frameset goes here, then enter the frameset name. You can then declare that frameset under the framesets list. If the item is a Frame then enter the frame name here. When specifying a target for a URL elsewhere in the application, this is the name you will use as the target. Avoid frame names that start with an underscore ( _ ) because all the reserved names start with an underscore. The default page URL to be populated into this frame when the frameset is first opened. Turn this on to allow scroll bars to appear if the page is too big for the frame. Turn this on to make the frame borders visible to the end user. turn this on to allow the end user to resize the frame. Set this to be the left, or top, margin for the frame. Set this to be the bottom, or right, margin for the frame. If this is on, and the Page is called with a parameter called Alert, then all the frame pages are passed that parameter as well.