NG Utils (ref)

(part of package 'Core NG only Services')

You can access it in code via: plugins.ngclientutils

Properties

VIEWPORT_MOBILE_DEFAULT

Constant representing the default viewport settings for mobile devices. This setting allows zooming in and out while displaying content correctly on mobile. Type: Number Default Value: 1

VIEWPORT_MOBILE_DENY_ZOOM

Constant representing the viewport settings that deny zoom functionality. This setting prevents users from zooming in or out on mobile devices. Type: Number Default Value: 2

VIEWPORT_MOBILE_DENY_ZOOM_IN

Constant representing the viewport settings that deny zooming in. This setting allows zooming out but prevents zooming in on mobile devices. Type: Number Default Value: 4

VIEWPORT_MOBILE_DENY_ZOOM_OUT

Constant representing the viewport settings that deny zooming out. This setting allows zooming in but prevents zooming out on mobile devices. Type: Number Default Value: 3

contributedTags

Array of contributed tags used for dynamic HTML header replacements. These tags are added to the DOM for customizing meta and other header tags at runtime. Type: Array<CustomType<ngclientutils.tag>>

API

addClassToDOMElement(cssSelector,className)

Utility method for manipulating any DOM element's style classes. It will add the given class to the DOM element identified via the css selector param.

NOTE: This operation is not persistent; it executes client-side only; so for example when the browser is reloaded (F5/Ctrl+F5) by the user classes added by this method are lost. If you need this to be persistent - you can do that directly via server side scripting elements.myelement.addStyleClass(...) if the DOM element is a Servoy component. If the DOM element is not a component then you probably lack something in terms of UI and you could build what you need as a new custom component or use another approach/set of components when building the UI.

Parameters:

{String} cssSelector The css selector string that is used to find the DOM element.
{String} className The class to be added to the element.

addFormStyleClass(formname,styleclass)

Utility method for manipulating form style classes. It will add a style class to a certain form, similar as a design style class would work.

Parameters:

{String} formname The form name to add to.
{String} styleclass The styleclass to be added to form tag.

getAbsoluteLocation(component)

Retrieves the screen location of a specific element. Returns the location as point (object with x and y properties).

@deprecated replaced by clientutils.getBounds()

Parameters:

{Runtimecomponent} component The component to retrieve location for.

Returns: Point The location of the component.

getFormStyleClass(formname)

Utility method for manipulating form style classes. It will get styleclasses assigned to a certain form, multiple styleclasses are separated by space.

NOTE: this call will only get style classes that were added via this plugin/service, not others that were previously set at design time or via solution model.

Parameters:

{String} formname The form name to get style classes.

Returns: String The styleclass of that form.

getUserAgent()

This will return the user agent string of the clients browser.

Returns: String The user agent string of the client's browser, identifying the browser, operating system, and device information.

printDocument(url)

Print a document from specific URL. This will open browser specific print dialog.

NOTE: url should be from same domain, otherwise a temp file on server should be created and served

@sample // if url is not from same domain we must create a temporary file var file = plugins.http.getMediaData(url); var remoteFileName = application.getUUID().toString() + '.pdf'; var remoteFile = plugins.file.convertToRemoteJSFile('/'+remoteFileName) remoteFile.setBytes(file,true); //Convert the remote file to a url, and print it var remoteUrl = plugins.file.getUrlForRemoteFile('/'+remoteFileName); plugins.ngclientutils.printDocument(remoteUrl)

Parameters:

{String} url The URL of document to be printed.

removeArguments()

This method removes the arguments from the client url. This is used for bookmark url to be correct or for back button behavior.

removeClassFromDOMElement(cssSelector,className)

Utility method for manipulating any DOM element's style classes. It will remove the given class from the DOM element identified via the css selector param.

NOTE: This operation is not persistent; it executes client-side only; so for example when the browser is reloaded (F5/Ctrl+F5) by the user classes removed by this method are lost; If you need this to be persistent - you can do that directly via server side scripting elements.myelement.removeStyleClass(...) if the DOM element is a Servoy component. If the DOM element it is not a component then you probably lack something in terms of UI and you could build what you need as a new custom component or use another approach/set of components when building the UI.

Parameters:

{String} cssSelector The css selector string that is used to find the DOM element.
{String} className The class to be added to the element.

removeFormStyleClass(formname,styleclass)

Utility method for manipulating form style classes. It will remove a styleclasse assigned to a certain form.

NOTE: this call will only remove style classes that were added via this plugin/service, not others that were previously set at design time or via solution model.

Parameters:

{String} formname The form name to remove from.
{String} styleclass The styleclass to be removed from form tag.

replaceHeaderTag(tagName,attrNameToFind,attrValueToFind,newTag)

Utility method for manipulating 'contributedTags' array. It searches for an existing 'tag' that has the given 'tagName' and attribute ('attrNameToFind' & 'attrValueToFind'). If found it will replace it with 'newTag'. If not found it will just append 'newTag' to 'contributedTags'.

NOTE: this call will only replace/remove tags that were added via this plugin/service, not others that were previously present in the DOM.

Parameters:

{String} tagName The tag name to find for replacement.
{String} attrNameToFind The attribute to find on that tag name for replacement. If null it will just find the first by 'tagName' and use that one.
{String} attrValueToFind The value the given attribute must have to match for replacement.
{CustomType<ngclientutils.tag>} newTag The new tag that replaces the old one. If null/undefined it will just remove what it finds.

Returns: CustomType<ngclientutils.tag> The tag that was removed if any.

scrollIntoView(anchorSelector,scrollIntoViewOptions)

Move the scrollbar to the position of the given anchorSelector. The target anchorSelector can be a Servoy Form, Layout Container or element in a responsive form or any element in a form. You can use styleClass as selector. For example: you can add 'scroll-element' to an element of the form. Examples of usage: - plugins.ngclientutils.scrollIntoView(".toScroll-To"); - plugins.ngclientutils.scrollIntoView(".toScroll-To", { behavior: "smooth", block: "start", inline: "nearest" });

Parameters:

{String} anchorSelector The selector to which the scrollbar should be moved to.
{Object} [scrollIntoViewOptions] Argument used for scrolling animation (example: { behavior: "smooth", block: "start", inline: "nearest" } ).

scrollToTop(selector)

Move the scrollbar to top position of the given selector. The target selector can be a Servoy Form, Layout Container or element in a responsive form or any element in a form. You can use styleClass as selector. For example: you can add 'scroll-element' to an element of the form. Examples of usage: - plugins.ngclientutils.scrollToTop(".toScroll-To");

Parameters:

{String} selector The selector to which the scrollbar should be moved to top.

setBackActionCallback(callback)

This will register a callback that will be triggered on all history/window popstate events (back,forward but also next main form). If this is registered then we will try to block the application from going out of the application. The callback gets 1 argument and that is the hash of the url, that represents at this time the form where the back button would go to. If this hash argument is an empty string then that means the backbutton was hit to the first loaded page and we force a forward again.

Parameters:

{Function} callback The function to execute when a popstate event occurs.

setLangAttribute(lang)

Set lang attribute on html tag.

Parameters:

{String} lang The language code to set as the lang attribute on the HTML tag.

setOnUnloadConfirmation(showConfirmation)

Set whether browser default warning message will be shown when the browser tab is closed or the users navigates away, this can be used to let users know they have data modifications that are not yet saved.

Parameters:

{Boolean} showConfirmation Boolean for whether to show confirmation message

setOnUnloadConfirmationMessage(message)

Set the message that will be shown when the browser tab is closed or the users navigates away, this can be used to let users know they have data modifications that are not yet saved. Note: We deprecated this api because browsers removed support for custom messages of beforeunload event. Now most browsers display a standard message.

@deprecated

Parameters:

{String} message The message to show when the user navigates away, null if nothing should be shown anymore.

setViewportMetaDefaultForMobileAwareSites()

Call this when a solution can handle mobile device layouts (responsive design, can handle nicely width < height). This call is equivalent to calling setViewportMetaForMobileAwareSites(plugins.htmlHeaders.VIEWPORT_MOBILE_DEFAULT).

It should be what most solutions that are able layout correctly on smaller mobile screens need; it will still allow the user to zoom-in and zoom-out.

setViewportMetaForMobileAwareSites(viewportDefType)

Call this when a solution can handle mobile device layouts (responsive design, can handle nicely width < height). It will tell the device via the "viewport" meta header that it doesn't need to automatically zoom-out and use a big viewport to allow the page to display correctly as it would on a desktop.

'viewportDefType' can be one of:

plugins.ngclientutils.VIEWPORT_MOBILE_DEFAULT - will show content correctly, allow zoom-in and zoom-out; the generated meta tag will be <meta name="viewport" content="width=device-width, initial-scale=1.0" />
plugins.ngclientutils.VIEWPORT_MOBILE_DENY_ZOOM - will show content correctly, denies zoom-in and zoom-out; the generated meta tag will be <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
plugins.ngclientutils.VIEWPORT_MOBILE_DENY_ZOOM_OUT - will show content correctly, allows zoom-in but denies zoom-out; the generated meta tag will be <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
plugins.ngclientutils.VIEWPORT_MOBILE_DENY_ZOOM_IN - will show content correctly, denies zoom-in but allows zoom-out; the generated meta tag will be <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

This method actually uses replaceHeaderTag. For example plugins.ngclientutils.VIEWPORT_MOBILE_DEFAULT would call

  replaceHeaderTag("meta", "name", "viewport", {
       tagName: "meta",
       attrs: [ { name: "name", value: "viewport" }
                { name: "content", value: "width=device-width, initial-scale=1.0" } ]
 });

Parameters:

{Number} viewportDefType One of the constants listed above.

Types

attribute

Represents an attribute for an HTML element. scripting type: CustomType<ngclientutils.attribute>

name
- The name of the attribute.
- Type: string
value
- The value of the attribute.
- Type: string