Difference between revisions of "JavaScript functions v1.0"
old>Admin |
|||
(48 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
| |||
= Code placement = | |||
The following places can contain JS code | |||
* Entity header | |||
* Entity status | |||
* JavaScript field | |||
Additionally HTML with inline script can be placed in | |||
* Wrapper | |||
* Template | |||
Finally expressions can be evaluated using | |||
* Entity field dependency | |||
| |||
= Builtin functions = | = Builtin functions = | ||
The following functions are only available for single item views (edit or show). | |||
== | == Get and set values == | ||
Display values are handled using standard getter and setters | Display values are handled using standard getter and setters | ||
* '''getValue(fieldName) ''' | * '''getValue(fieldName) ''' | ||
Line 9: | Line 25: | ||
Example | Example | ||
<syntaxhighlight lang="javascript"> | |||
let a = getValue("NUMBER1"); | |||
let b = getValue("NUMBER2"); | |||
setValue( "RESULT", (a-b) ); | |||
</syntaxhighlight> | |||
For explicitly getting a value (or ID) use | For explicitly getting a value (or ID) use | ||
Line 17: | Line 35: | ||
Example | Example | ||
== Toggling fields ( | <syntaxhighlight lang="javascript"> | ||
let recordId = getDecimal("SELECTRECORD"); | |||
</syntaxhighlight> | |||
== Toggling fields (5478+) == | |||
Note: Hide functions are NOT intended for denying access to data -it will only be hidden in the frontend, but is still accessible to savvy users. | Note: Hide functions are NOT intended for denying access to data -it will only be hidden in the frontend, but is still accessible to savvy users. | ||
Line 28: | Line 49: | ||
Examples | Examples | ||
<syntaxhighlight lang="javascript"> | |||
hideField("USER"); | |||
hideField("StatusID"); | |||
</syntaxhighlight> | |||
=== Dependent toggling === | === Dependent toggling === | ||
Line 49: | Line 71: | ||
In this example NAME should only be displayed for a few status | In this example NAME should only be displayed for a few status | ||
<syntaxhighlight lang="javascript"> | |||
hideField("NAME"); | |||
showFieldForStatusId("NAME",1234); | |||
showFieldForStatusId("NAME",1235); | |||
</syntaxhighlight> | |||
=== Disclaimer === | === Disclaimer === | ||
The functions are the equivilant of JQuery | The functions are the equivilant of JQuery | ||
<syntaxhighlight lang="javascript"> | |||
$("#VB_DATA_"+fieldName).parent().parent().hide(); | |||
$("#VB_DATA_"+fieldName).parent().parent().hide(); | |||
</syntaxhighlight> | |||
This means that fields are expected to be wrapped in TWO layers of html tags for the functions to work | This means that fields are expected to be wrapped in TWO layers of html tags for the functions to work | ||
= Control variables = | == Toggling status == | ||
A convenience method is planned for version 7800. Untill then you can use a Jquery expression. | |||
<syntaxhighlight lang="javascript"> | |||
$("#DATA_StatusID option[value='123']").remove(); | |||
</syntaxhighlight> | |||
==Binding to events (6734+)== | |||
The platform sends out events when a couple of events are performed. Code can be written to bind to these. | |||
===Events=== | |||
*<code>hide-field</code>, triggered when the platform hides a field (dependency or hideField-function) | |||
*<code>show-field</code>, triggered when the platform shows a field (dependency or showField-function) | |||
===How to bind === | |||
<syntaxhighlight lang="javascript"> | |||
$("tr").bind("hide-field", function(e) { | |||
// Do stuff.. | |||
}) | |||
</syntaxhighlight> | |||
==Value dependencies== | |||
Using lookup select boxes you can set up complex dependencies between values. The target field will be filtered when the page loads and on all changes to the filter field(s). | |||
===Single dependency=== | |||
<syntaxhighlight lang="javascript"> | |||
lookupValueFilterOnChange(fieldNameTarget, fieldNameSource, tripleArrayOfConditions); | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
var conditions = [ | |||
[ TargetValue, SourceValue ... ], | |||
]; | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
var conditions = [ | |||
["Ding", "Foo"], | |||
["Dong", "Foo"], | |||
["Ding", "Bar"], | |||
]; | |||
lookupValueFilterOnChange("LOOKUP", "FILTER", conditions); | |||
</syntaxhighlight> | |||
In the above "Ding" and "Dong" will be available to select when FILTER = "Foo" | |||
===Double dependency=== | |||
<syntaxhighlight lang="javascript"> | |||
lookupValueFilterDoubleOnChange(fieldNameTarget, fieldNameSource1, fieldNameSource2, tripleArrayOfConditions); | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
var conditions = [ | |||
["Ding", "Foo", "Cat"], | |||
["Dong", "Foo", "Dog"], | |||
["Ding", "Bar", "Cat"], | |||
["Dong", "Bar", "Fish"], | |||
]; | |||
lookupValueFilterDoubleOnChange("LOOKUP", "FILTERA", "FILTERB", conditions); | |||
</syntaxhighlight> | |||
In the above "Ding" will be available to select when either : | |||
*FILTERA = "Foo" -AND- FilterB = "Cat" | |||
*FILTERA = "Bar" -AND- FilterB = "Cat" | |||
==Value triggers== | |||
Value triggers will make things happen when a field changes. Multiple triggers can be assigned to the same field. | |||
*'''setValueOnChange(sourceName,targetName,targetValue)''' | |||
* '''setValueOnSetValue(sourceName,sourceValue,targetName,targetValue)''' | |||
Sets the value if another field is changed. Optionally only if a ceratain value is selected (sourceValue) | |||
<syntaxhighlight lang="javascript"> | |||
setValueOnChange("CATEGORY","Silver","StatusID","Customer changed") | |||
</syntaxhighlight> | |||
* '''warningOnChange(sourceName,message)''' | |||
*'''warningOnSetValue(sourceName,sourceValue,message)''' | |||
Display a warning to a user if another field is changed. Optionally only if a ceratain value is selected (sourceValue) | |||
| |||
==Value lookups== | |||
Value lookups will copy values from other records to the current one. The normal usecase is records referring other records via parent references. | |||
*'''getValueFromLookup(SourceSagID,SourceDataID,FieldNameSource)''' | |||
*'''setValueFromLookup(SourceSagID,SourceDataID,FieldNameSource,FieldNameTarget)''' | |||
The function will | |||
#Make a call to ?SagID=''[SagID]''&DataID=''[DataID]''&command=show | |||
#Pickup the value in the page at #VB_DATA_''[FieldNameSource]'' | |||
#Insert the value in the local field ''FieldNameTarget'' | |||
The DataID on the remote record can be picked up automatically by specifying FieldNameTrigger. Note this will only work as long as the trigger field is in editable and the value is changed. | |||
*'''setValueFromLookupTriggered(FieldNameTrigger,SourceSagID,FieldNameSource,FieldNameTarget)''' | |||
The function will | |||
#E´xtract the DataID form the field ''FieldNameTrigger'' | |||
# Same as above | |||
==Inspect command and users== | |||
The currect command can be examined using | |||
*'''isCommandNew()''' | |||
*'''isCommandEdit()''' | |||
*'''isCommandList()''' | |||
Note that commands are allways added as a class to the #TempusServaPage element | |||
<syntaxhighlight lang="javascript"> | |||
<div id="TempusServaPage" class="TempusServaPage listCommand da_DK"> | |||
</syntaxhighlight> | |||
User types can be determined using | |||
* '''isUserAdmin()''' | |||
*'''isUserExternal()''' | |||
*'''isUserNormal()''' | |||
* '''isUserExclusive()''' (from version 6248) | |||
Note that special roles are allways added as a class to the #TempusServaPage element | |||
<syntaxhighlight lang="javascript"> | |||
<div id="TempusServaPage" class="TempusServaPage IsAdministrator listCommand da_DK"> | |||
</syntaxhighlight> | |||
This allows for custom CSS for special roles | |||
<syntaxhighlight lang="css"> | |||
.IsAdministrator h1 { color: red; } | |||
</syntaxhighlight> | |||
==Other functions== | |||
=== selectSingleOption(fieldName) === | |||
Will set a value if only one option is avaiable in a select box. | |||
=== warnDateAfterOtherDate( dateA, dateZ, message ) === | |||
Alerts the user via a popup, if two dates are not after each other. Both date changes triggers the test. | |||
=== disableErrorCountInTitle() and enableErrorCountInTitle() (6734+) === | |||
Will disable/enable displaying of numbers of errors i the page-title. Default is enabled | |||
=== changeFieldToShow(fieldName) === | |||
Remove input and select boxes and replace them with the value in the field | |||
=Control variables= | |||
TS uses a number of special variables to control the behavior of the frontend. These variables can be changed anywhere. | TS uses a number of special variables to control the behavior of the frontend. These variables can be changed anywhere. | ||
=== Opening new windows === | ===Opening new windows=== | ||
Window default sizes are controlled by the following variables | Window default sizes are controlled by the following variables | ||
* '''tsOpenWindowHeight''' = 680; | *'''tsOpenWindowHeight''' = 680; | ||
* '''tsOpenWindowWidth''' = 820; | *'''tsOpenWindowWidth''' = 820; | ||
| |||
=== Dependency hiding fields === | ===Dependency hiding fields === | ||
'''hideTableRowsForElements''' is by default true. | '''hideTableRowsForElements''' is by default true. | ||
Set to false if template structure is only in a single level. | Set to false if template structure is only in a single level. | ||
* true: Hide two parent nodes when hiding fields | *true: Hide two parent nodes when hiding fields | ||
* false: Hide single parent node when hiding fields | *false: Hide single parent node when hiding fields | ||
Example of 2 level template (default) | Example of 2 level template (default) | ||
<syntaxhighlight lang="html5"> | |||
<tr> | |||
<td> | |||
<input .. | |||
</syntaxhighlight> | |||
Example of 1 level template (special cases) | Example of 1 level template (special cases) | ||
= Other sources = | <syntaxhighlight lang="html5"> | ||
<div> | |||
<input .. | |||
</syntaxhighlight> | |||
| |||
=Other sources= | |||
* [[JQUERY / SCRIPT CHEATSHEET| Readonly radiobuttons, copy text in field, build selectbox from service ... ]] | *[[JQUERY / SCRIPT CHEATSHEET| Readonly radiobuttons, copy text in field, build selectbox from service ...]] | ||
* [[HACKING DEPENDENT VALUES| Handling dependent lookup values (showing all elements etc.)]] | *[[HACKING DEPENDENT VALUES| Handling dependent lookup values (showing all elements etc.)]] |
Latest revision as of 13:07, 24 October 2024
Code placement
The following places can contain JS code
- Entity header
- Entity status
- JavaScript field
Additionally HTML with inline script can be placed in
- Wrapper
- Template
Finally expressions can be evaluated using
- Entity field dependency
Builtin functions
The following functions are only available for single item views (edit or show).
Get and set values
Display values are handled using standard getter and setters
- getValue(fieldName)
- setValue(fieldName,value)
Example
let a = getValue("NUMBER1");
let b = getValue("NUMBER2");
setValue( "RESULT", (a-b) );
For explicitly getting a value (or ID) use
- getDecimal(fieldName)
Example
let recordId = getDecimal("SELECTRECORD");
Toggling fields (5478+)
Note: Hide functions are NOT intended for denying access to data -it will only be hidden in the frontend, but is still accessible to savvy users.
Fields can be shown or hidden calling the fieldname
- hideField(fieldName)
- showField(fieldName)
Examples
hideField("USER");
hideField("StatusID");
Dependent toggling
Hiding and showing fields can be made dependent on classes in the TempusServaPage
- hideFieldForPageClass(fieldName,className)
- showFieldForPageClass(fieldName,className)
Hiding and showing fields can be made dependent on items current status.
- hideFieldForStatusId(fieldName,statusId)
- showFieldForStatusId(fieldName,statusId)
Hiding and showing fields can be made dependent on classes in the TempusServaPage AND items current status.
- hideFieldForPageClassAndStatusId(fieldName,className,statusId)
- showFieldForPageClassAndStatusId(fieldName,className,statusId)
In case of advanced setup consider "hide for all first and show for some later". In this example NAME should only be displayed for a few status
hideField("NAME");
showFieldForStatusId("NAME",1234);
showFieldForStatusId("NAME",1235);
Disclaimer
The functions are the equivilant of JQuery
$("#VB_DATA_"+fieldName).parent().parent().hide();
$("#VB_DATA_"+fieldName).parent().parent().hide();
This means that fields are expected to be wrapped in TWO layers of html tags for the functions to work
Toggling status
A convenience method is planned for version 7800. Untill then you can use a Jquery expression.
$("#DATA_StatusID option[value='123']").remove();
Binding to events (6734+)
The platform sends out events when a couple of events are performed. Code can be written to bind to these.
Events
hide-field
, triggered when the platform hides a field (dependency or hideField-function)show-field
, triggered when the platform shows a field (dependency or showField-function)
How to bind
$("tr").bind("hide-field", function(e) {
// Do stuff..
})
Value dependencies
Using lookup select boxes you can set up complex dependencies between values. The target field will be filtered when the page loads and on all changes to the filter field(s).
Single dependency
lookupValueFilterOnChange(fieldNameTarget, fieldNameSource, tripleArrayOfConditions);
var conditions = [
[ TargetValue, SourceValue ... ],
];
var conditions = [
["Ding", "Foo"],
["Dong", "Foo"],
["Ding", "Bar"],
];
lookupValueFilterOnChange("LOOKUP", "FILTER", conditions);
In the above "Ding" and "Dong" will be available to select when FILTER = "Foo"
Double dependency
lookupValueFilterDoubleOnChange(fieldNameTarget, fieldNameSource1, fieldNameSource2, tripleArrayOfConditions);
var conditions = [
["Ding", "Foo", "Cat"],
["Dong", "Foo", "Dog"],
["Ding", "Bar", "Cat"],
["Dong", "Bar", "Fish"],
];
lookupValueFilterDoubleOnChange("LOOKUP", "FILTERA", "FILTERB", conditions);
In the above "Ding" will be available to select when either :
- FILTERA = "Foo" -AND- FilterB = "Cat"
- FILTERA = "Bar" -AND- FilterB = "Cat"
Value triggers
Value triggers will make things happen when a field changes. Multiple triggers can be assigned to the same field.
- setValueOnChange(sourceName,targetName,targetValue)
- setValueOnSetValue(sourceName,sourceValue,targetName,targetValue)
Sets the value if another field is changed. Optionally only if a ceratain value is selected (sourceValue)
setValueOnChange("CATEGORY","Silver","StatusID","Customer changed")
- warningOnChange(sourceName,message)
- warningOnSetValue(sourceName,sourceValue,message)
Display a warning to a user if another field is changed. Optionally only if a ceratain value is selected (sourceValue)
Value lookups
Value lookups will copy values from other records to the current one. The normal usecase is records referring other records via parent references.
- getValueFromLookup(SourceSagID,SourceDataID,FieldNameSource)
- setValueFromLookup(SourceSagID,SourceDataID,FieldNameSource,FieldNameTarget)
The function will
- Make a call to ?SagID=[SagID]&DataID=[DataID]&command=show
- Pickup the value in the page at #VB_DATA_[FieldNameSource]
- Insert the value in the local field FieldNameTarget
The DataID on the remote record can be picked up automatically by specifying FieldNameTrigger. Note this will only work as long as the trigger field is in editable and the value is changed.
- setValueFromLookupTriggered(FieldNameTrigger,SourceSagID,FieldNameSource,FieldNameTarget)
The function will
- E´xtract the DataID form the field FieldNameTrigger
- Same as above
Inspect command and users
The currect command can be examined using
- isCommandNew()
- isCommandEdit()
- isCommandList()
Note that commands are allways added as a class to the #TempusServaPage element
<div id="TempusServaPage" class="TempusServaPage listCommand da_DK">
User types can be determined using
- isUserAdmin()
- isUserExternal()
- isUserNormal()
- isUserExclusive() (from version 6248)
Note that special roles are allways added as a class to the #TempusServaPage element
<div id="TempusServaPage" class="TempusServaPage IsAdministrator listCommand da_DK">
This allows for custom CSS for special roles
.IsAdministrator h1 { color: red; }
Other functions
selectSingleOption(fieldName)
Will set a value if only one option is avaiable in a select box.
warnDateAfterOtherDate( dateA, dateZ, message )
Alerts the user via a popup, if two dates are not after each other. Both date changes triggers the test.
disableErrorCountInTitle() and enableErrorCountInTitle() (6734+)
Will disable/enable displaying of numbers of errors i the page-title. Default is enabled
changeFieldToShow(fieldName)
Remove input and select boxes and replace them with the value in the field
Control variables
TS uses a number of special variables to control the behavior of the frontend. These variables can be changed anywhere.
Opening new windows
Window default sizes are controlled by the following variables
- tsOpenWindowHeight = 680;
- tsOpenWindowWidth = 820;
Dependency hiding fields
hideTableRowsForElements is by default true.
Set to false if template structure is only in a single level.
- true: Hide two parent nodes when hiding fields
- false: Hide single parent node when hiding fields
Example of 2 level template (default)
<tr>
<td>
<input ..
Example of 1 level template (special cases)
<div>
<input ..