Edit form - Image

Manual in PDF format

1. Basic information

1.1. Description of the control

Image is a control designed to insert an image either using the “Browse…” button or using the “CTRL + V” key from the clipboard. The maximum size of the inserted image can be limited to a predetermined size. Image uses the database type “int”, and stores in the database the ID of the file attachment, which is physically stored on disk in the “Files” directory, and has descriptive data with the file name and size stored in a separate entry in the database table “sfiles”.

1.2. Create a new control

There are two basic ways to create a new image:

From the Edit form

• The most common way is to create a new image directly from the edit form using the toolbar with controls.
• First, the position in which the new image is to be placed is determined by clicking the mouse in the edit form. This will highlight the selected position with a gray horizontal line. Then just click on the “Image” item in the toolbar of the edit form, fill in the attributes of the new control in the newly opened dialog, and then save. This will insert a new image in the pre-selected location of the edit form.
• If the desired position is not determined before inserting a new image, the new image will be inserted at the end of the edit form.

From the View table

• The view table has an icon on the right edge to add a new column. The subsequently displayed list of controls allows you to select a new image, which will be placed in the edit form immediately after the control, which is displayed last in the view table. After filling in the attributes of the new control and saving it, a new image will be inserted into the edit form, and at the same time a new column will be added to the view table, which is associated with the newly created image.

1.3. Edit or delete a control

• For each existing control, a pencil icon appears on the left side of the edit form to change or delete the control's settings.
• Individual controls can be moved vertically in the edit form using the Drag&Drop method. Moving consists of grabbing the control, preferably behind its name located in the left column of the edit form, and then dragging it to the desired position in the edit form.
• For security reasons, it is important to have the function of moving controls enabled using the “Drag&Drop” check box located above the toolbar with controls. This field is unchecked each time you log in to the application.
• Deleting an image results in the irreversible deletion of the database column associated with that image in the database, and thus in the deletion of its values in all records in the database table, as well as in the deletion of all file attachments that represent those records.

2. List of tabs in the control settings dialog

• General – Setting general properties
• Button – Button settings that can be displayed to the right of the control
• Help – Settings for help text that can be displayed on the right side of the edit form
• Filter – Setting the filter that can be displayed in the view table in the column header
• Rights – Rights settings
• Administration – Setting other properties

2.1. “General” tab

2.1.1. Name

• The name of the control displayed in the edit form in a separate column with a colored background to the left of the control itself.

2.1.2. Abbreviated name

• Optional control name displayed in the view table header if the control is selected as one of the view table columns.
• If an abbreviated name is specified, the full name of the control is displayed in the tooltip above the abbreviated name.
• If an abbreviated name is not specified, the full name of the control is displayed in the header of the view table.
• The abbreviated name “ ” (fixed space) can completely hide the name of the control displayed in the view table.

2.1.3. Dictionary…

• The dictionary lists the names of other controls, forms, view pages, categories, applications, and application groups used across the entire application.
• The dictionary search is used to design the correct control name and to maintain the consistency of the nomenclature throughout the application so that controls with the same meaning located in different places in the application are named in the same way.

2.1.4. Maximum size

• The maximum size of the uploaded file in MB that is uploaded using the “Browse” button.
• Files larger than the set maximum size are automatically discarded.

2.1.5. Options

• Required field
  • Checking the required field determines whether the edit form should require the insertion of a file attachment before saving the record to the database.
  • The required field setting does not affect the database type of the column that is associated with the current control in the database. All database columns are set to accept the database value “null”.
  • The value can be stored in the database as an integer or as a “null” database value. When compiling the conditions of a database query, it is therefore important to take into account the alternative that the database value “null” is stored in a column in the database table in addition to zero – an integer. Such a condition may look like this in NG speech: image equals “0” or image is not defined. And now in SQL: ng_image = 0 OR ng_image IS NULL.
• Hide “Remove” button
  • Checking this box determines whether the “Delete” button, which is used to delete an existing file attachment stored in the control, should be hidden. Even with the “Delete” button hidden, it is possible to upload another file attachment using the “Browse…” button.
• Hide “Rename” button
  • Checking this box determines whether the “Rename” button, which is used to rename an existing file attachment stored in the control, should be hidden.
• Hidden field
  • The hidden field setting determines whether the control should be part of an edit form, but should not be visible in user mode.
  • The hidden control, including the filled value, can be found in the source code of the web page. It cannot therefore be used as part of security measures, the rights to the control are used for this.
• Update the form after uploading the file
  • Checking this field determines whether the edit form should be automatically updated after a successful upload of the file attachment, resp. whether to update all other controls in the edit form.

2.1.6. In the Edit form

• Show link
  • Checking this box determines whether the file attachment should be displayed as a link in the edit form.
• Show image
  • Checking this box determines whether the file attachment should be displayed in the edit form in the form of an image with the set maximum width or height in pixels.

2.1.7. In the View table

• Show link
  • Checking this box determines whether the file attachment should be displayed as a link in the view table.
• Show image
  • Checking this box determines whether the file attachment should be displayed in the view table in the form of an image with the set maximum width or height in pixels.

2.1.8. In the details

• Show link
  • Checking this box determines whether the file attachment should be displayed as a link in the details of the view table.
• Show image
  • Checking this box determines whether the file attachment should be displayed in the details of the view table in the form of an image with the set maximum width or height in pixels.

2.2. “Button” tab

2.2.1. Title

• The title specifies the name of the button, which optionally appears to the right of the control itself in the edit form.
• An empty name means that the button will not be displayed.

2.2.2. Width

• Button width in pixels.

2.2.3. Client

• The “Client” field specifies a list of javascript commands that will be executed when the button is pressed. The drop-down list offers the following frequently used javascript functions:
  • Do you really want to? – return confirm('Do you really want to...?');
  • AJAX… – return bt_Eval(this, 'ngef.aspx?test', 'evalFunction');

2.2.4. Server

• If the javascript commands are successfully evaluated, or if no javascript commands are defined, the server-side script will then be run. The “Modify script” link is used to open the integrated graphic script designer, in which the script is defined, resp. server part of the button.
• Execution of javascript commands can be interrupted by the command “return false;”, which prevents the subsequent execution of the script on the server side.

2.3. “Help” tab

2.3.1. Help

• Help is the text displayed to the right of the control itself in the edit form. The help of all controls starts on the same vertical line in the entire edit form – they are optically placed in a separate help column.
• The display of help text differs when snapping controls.
  • If “Automatic grouping” is checked in the edit form settings, a bulleted list of all help controls located in the same row will be automatically generated in the help column, with the option to click the bulleted list item and display the help text.
  • If “Automatic grouping” is not checked in the edit form settings, the help for controls to the left of snapped controls is not displayed.
• Help text supports simple text formatting using wiki syntax:
  • '''Bold text'''
  • ''Italics''
  • '''''Bold italics'''''
  • ""Text enclosed in double quotes""
  • Lists:
    • * Heading 1
    • ** Subheading 1.1
    • ** Subheading 1.2
    • * Heading 2
    • * Heading 3
    • # Numbered heading 1
    • ## Numbered subheading 1.1
    • ## Numbered subheading 1.2
    • # Numbered heading 2
    • # Numbered heading 3
• The text of the help can be displayed only after clicking on the icon with a question mark, which is located in a common place as help, only visually it takes up less space. Alternatively, abbreviated help text may appear in front of this icon. The question mark icon is defined by placing three dots at the end of the first line of help and then entering a new line (enter). The three dots may be preceded by an abbreviated help text. This is followed by help text of any length, including transitions to new lines.
  • …
    Help text displayed after clicking on the question mark icon
  • Short help text…
    Help text displayed after clicking on the question mark icon

• In conjunction with the question mark icon, a variant can be used in which, after clicking on the icon, the help text followed by three dots is not displayed, but on the contrary, the content of, for example, the wonder located anywhere in the edit form is displayed/hidden. On the new line after the three dots, it is necessary to specify the ID of this wonder using the javascript function “el”.
  • …
    el('D1')
  • Short help text…
    el('D1')

• The help radio button contains the following two types of help definitions:
  • Text – help text defines a manually entered text string located in a multi-line text field below the radio button
  • From query – the help text defines the result of a database query, which is evaluated when opening the edit form

2.3.2. Notes

• Notes are used to enter any text intended for the application administrator.

2.4. “Filter” tab

2.4.1. Options

• Show filter in the View table
  • Checking this box determines whether the view table should be allowed to filter records by the values present in the database in the column associated with this control. The filter drop-down list is located in the header of the view table under the name of the control.
  • The filter drop-down list does not display the specific values present in the database in the column associated with this control, only the options
    • Search – searching for records in the database that have the searched value stored in the file attachment name, or in the case of file attachment indexing enabled, also in its content.
    • Empty – search for records in the database that have the value 0 or the database value “null” stored in the column associated with this control
    • Not empty – search for all other records in the database

2.5. “Rights” tab

2.5.1. Rights

• Rights define a list of user groups and users who have permission to display a control on an edit form and to display the values of that control elsewhere in the application.
• Users who do not have control rights
  • they do not see the control or its value in the edit form, nor can they find it in the source code of the page in a web browser,
  • they cannot display the column associated with this control in a view table or other visual control intended for viewing data.
  • they can create an entry in the edit form in which there is a control to which they do not have rights, the value of these controls is then set to the database value “null”,
  • they cannot delete any record in an edit form in which there is a control to which they do not have rights.
• An application administrator can cause a logical error when a javascript function refers to a control that may not be accessible from a rights perspective for some users. The variable “ng_” is then replaced

for the value stored in the database in this control instead of a reference to the control object itself. In most cases, this error stops loading the edit form, it disables itself, and the user is shown a message that he should contact the application administrator. This type of error can be partially eliminated using the report “Controls (JavaScript + insufficient rights)”.

2.5.2. Show value

• The display of the control value can be limited only to the users who created the database record, or are set as co-owners of all records in the edit form settings.
• The radio button contains the following types of value display:
  • To all users – the control, including its value, will be displayed to all users who have the right to the control
  • Only to the owner or co-owner of the record – the control, including its value, will be displayed only to users who have the right to the control and at the same time are the owners of the currently open database record in the edit form (created the record) or are set as co-owners of all records in the edit form settings.

2.5.3. Replace rights to other controls

• The “Replace rights to other controls” function is used to unify the rights within the entire edit form for controls that are related in terms of rights.
• Thanks to the “Show…” link, it is possible to display a list of all controls in the edit form, including setting the rights of these controls. For each control, a check box is displayed that allows you to select the control. When you save a control, the same rights are then set for those selected controls.
• An alternative for unifying rights within the entire edit form is to display the report available from the “Subordinate object rights” tab in the edit form settings.

2.6. “Administration” tab

• The “Administration” tab is only displayed for existing controls.

2.6.1. Identifier

• The identifier specifies the name of the database column in which the values entered through the control in the edit form are stored in the database.
• The identifier is derived from the name of the control. It starts with the prefix “ng_”, and also contains the alphanumeric characters used in the control name (system controls do not include the prefix “ng_”). When changing the name of the control, the “Correct” button is available, which is used to correct the identifier, and thus to rename the database column in the database. For clarity and to eliminate possible misunderstandings, it is recommended to keep the identifier in accordance with the name of the control element. If external applications also access the database and, for example, read or write data to this column, it is necessary to schedule the change of the identifier until a suitable time.

2.6.2. Full identifier

• The full identifier of the control also contains the identifier of the edit form, and is used in printing templates.

2.6.3. Index

• Checking this box determines whether the column associated with this control should be indexed in the database. In the text field located below the check box, it is also possible to define the names (identifiers) of other columns that are to be in the associated index with this database column – they should be part of the index key.
• For the MSSQL database, it is also possible to define “INCLUDE” columns to be attached to the index. However, they are not part of the index key, but the values of that key. The Firebird database does not allow this functionality.

2.6.4. Search in the View table

• The search determines whether records in the view table should be searched by the file attachment name after entering a search term or phrase in the database in the column associated with this control.
  • Allow – Searching in this column is enabled, and a check box appears in the view table, which allows you to include the table column in the list of searched columns.
  • Deny – Searching in this column is disabled, and there is no check box in the view table to include the table column in the list of columns to be searched.

2.6.5. Other

• Current value in the database
  • The text box displays the current value of the currently open record in the edit form in the given control, with the possibility to change this value.
• Change type to
  • The drop-down list offers the types of controls to which conversion of the control is supported, including automatic conversion of the data present in the database table.

2.6.6. Statistics

• Statistics display aggregated information about control usage across the entire application.
• Using the “Statistics” button, a detailed report of all places where the control is used or referenced is displayed, including the possibility to open the settings of such a place or control.
• Before each change of control type or data type, or before each deletion of a control from the edit form, it is recommended to thoroughly go through the control statistics, and eliminate any misunderstandings.
• Before each deletion of the control from the edit form, the evaluation of the statistics starts automatically. If the control is used or referenced somewhere in the application, it is necessary to confirm the deletion of the control again.

3. Picker

3.1. Basic information

• Picker is a dialog box that displays a view table with database records, the values of which can be taken or copied to the currently open edit form. The picker is typically used to copy entire database records or to take a ForeignKey value.
• The link to the pickup dialog box with the view table and database records is in the form of a magnifying glass icon, and appears in the edit form to the right of the control to which the picker is associated.
• The picker settings are made in a separate dialog. The link to this dialog is in the form of a magnifying glass icon, and is located in the lower left corner of the control settings dialog to which the picker is associated.

3.2. “General” tab

3.2.1. Tooltip

• The tooltip determines the help text that appears when you hover over the picker icon in the edit form.

3.2.2. Data source

• The data source defines the data displayed in the viewer's view table. This data is the result of a database query, which is evaluated when opening the picker window or when starting to whisper values directly into the edit form.
• Data source settings are made in the graphical designer of database queries.

3.2.3. Records per page

• For clarity, the view table uses the paging of the displayed records. This is useful in situations where the view table is retrieving large amounts of data.
• The number of records per page determines the maximum number of records that appear on one page. You can easily switch between pages using the tools that each view table contains in its footer.

3.2.4. Options

• Optimized search
  • Optimized search means that each column of the picker's view table uses its own text box to enter a search term or phrase.
  • A normal (non-optimized) search means that one common text field is used to enter a search term, in which it is possible to list all search terms, and these are then searched in all columns of the view table at once.
• Show search results only
  • Checking this box determines whether the picker's view table should display records only when a search term or phrase is entered.
• Allow creating new records
  • Checking this box determines whether a button for entering a new record of the same agenda, which is used as a data source in the view table, will be displayed below the pickup view table.
• Allow opening records
  • Checking this box determines whether it should be possible to open individual records from the picker's view table and display the detail of a specific database record in the picker's dialog box directly in its edit form.
• Allow multiple records to be selected at once
  • Checking this box allows you to select multiple records in the pickup at once. Individual records are selected in the picker by checking the checkbox located on each row of the picker's view table in the first column. In this way, however, it is possible to select only the column “(ID)”, i.e. primary key. The selected records are transferred to the edit form as individual primary key values separated by a semicolon.

3.2.5. Assignment table

• Columns
  • The column settings determine which column of the view table in the picker will be copied to the control in the edit form.
  • Picked columns – those that have a source and destination set – are automatically displayed in the picker's view table in the order in which they appear in the assignment table.
  • The columns in the viewer's view table can be hidden by selecting the “Hide” command from the drop-down list located to the right of the “Destination” drop-down list.
  • For columns in the picker's view table, it is possible to activate the search by selecting the “Activate search” command from the drop-down list located to the right of the “Destination” drop-down list.
  • If no search column is selected, the search is automatically activated for all columns of the pickup view table, where this is allowed in terms of the general view table view settings defined in the control's properties.

3.3. “Help” tab

• On the “Help” tab, it is possible to set a list of all other columns to be displayed in the picker's view table, even though none of these columns are peaked.

3.4. “Activate search” tab

• On the “Activate search” tab it is possible to set a list of all other columns in which the search is to be activated.

3.5. “Other” tab

• Template name
  • Picker settings can be saved to a template so that another control field that retrieves data from the same data source can be easily copied when setting up the picker.

4. Examples

4.1. Javascript functions

• var s = control_GetValue(#ng_#);
• var filename = #ng_#.getAttribute('title');
• var size = jsN(#ng_#.getAttribute('size'));
• control_Disable(#ng_#); // General javascript function for all database controls
• image_Disable(#ng_#);
• control_Enable(#ng_#); // General javascript function for all database controls
• image_Enable(#ng_#);
• picker_Open(#ng_#);

4.2. Server functions

• SCHEDULEDEFAULTVALUE(ng_, #ng_#)
• ATTACHMENTGALLERY(1;2;3, 120, 120)
• ATTACHMENTGALLERY(1;2;3, 120, 120, 5)
• ATTACHMENTNAME(#ng_image#)
• ATTACHMENTURL(#ng_image#)
• COPYATTACHMENT(#ng_image#)
• COPYATTACHMENT(#ng_image#, #rootpath#Temp)
• CREATEATTACHMENT(data: image/png; base64,...)
• REDUCEATTACHMENT(#ng_image#, maxwidth, maxheight)