The result of the command will be a string value like {xor}Kzc6Dz4sLCgwLTs= . Use this encoded value when specifying a password.","title":"Encoding passwords"},{"location":"openliberty_customized_deploy.html#section_edb_2js_gxb","text":"This is optional. The credentials supplied below are used in the container startup to run configuration tasks and setup Leap. The default credentials are set to leapadmin for username and password. To change the default admin, add this snippet to your .yaml file and update the adminUser and adminPassword properties. security: leap: adminUser: \"leapadmin\" adminPassword: \"leapadmin\"","title":"Change server Admin credentials"},{"location":"openliberty_customized_deploy.html#section_g5g_x5s_gxb","text":"The Leap Helm chart and container offer a basic SAML configuration through the Helm values. This can be used to enable SAML, deploy the WebSphereSamlSP.ear, configure the ACS URL, pass the IdP Metadata of the identity provider and add trusted realms. Note: Please note that this configuration can currently only be used to enable the SAML TAI SSO. To disable it, please set the enabled flag to false and remove the Trust Association manually in WebSphere. The idpMetadata accepts IdP Metadata in xml format. Please use the multiline string feature of Helm to pass this value. The ssoId9999 is used to create the SAML TAI SSO.Example configuration: security: leap: saml: enabled: true acsUrl: \"https://native-kube-kevin.team-q-dev.com:9443/samlsps/acs\" idpMetadata: | samltest.id SAMLtest IdP A free and basic IdP for testing SAML deployments https://samltest.id/saml/logo.png ... ","title":"SAML configuration"},{"location":"openliberty_customized_deploy.html#section_x5j_x5s_gxb","text":"The customCertificateSecrets parameter can be used to reference certificates or keys that might be required for SSL communication to the Leap server, the LDAP server, the database, or other services. Changes to the keystores require a restart of the container. The following is an example of creating a new Secret from TLS Key and Certificate files: kubectl create secret tls myTlsCertSecret --key=\"certificate.key\" --cert=\"certificate.crt\" The following is an example of adding a DB2 SSL certificate to another Secret: kubectl create secret generic myDb2SslSecret --from-file=mydbservercert.arm configuration: leap: customCertificateSecrets: myTlsCertSecret: \"myTlsCertSecret\" myDb2SslSecret: \"myDb2SslSecret\" This adds the certificates and key to the keystore with the id\u202fdefaultKeyStore\u202fwhich can then be referenced in the\u202fserver.xml\u202for any overrides. The\u202fdefaultKeyStore\u202fis also used as the default by many configuration elements in Open Liberty that require a keystore.","title":"Certificates"},{"location":"openliberty_customized_deploy.html#section_pqj_3ts_gxb","text":"The configOverrideFiles parameter allows configuration snippets to be passed to the Leap server. The snippets are merged into the Open Liberty server.xml. After making changes to the .yaml, apply them using the helm upgrade ... command. Changes are picked up by Open Liberty and applied at runtime - this does not require a restart. Note: The name of the customization (myCustomOverride1 in the following snippet) can be any string, but you may want it to be descriptive of what is being provided. configuration: leap: configOverrideFiles: myCustomOverride1: | There are several configuration changes that you may need to add to complete your deployment: SMTP, Database, LDAP. Sample snippets have been provided, which will need to be updated with your specific details. Connecting to a DB2 Instance The DB2 jdbc driver has been included and can be found at ${server.config.dir}/lib. configuration: leap: configOverrideFiles: db2Override: | Connecting to an Oracle Instance The oracle jdbc driver has been included and can be found at ${server.config.dir}/lib. Note: To connect over SSL, complete the following steps: change the URL to: jdbc:oracle:thin:@(DESCRIPTION=(ADDRESS=(PROTOCOL=TCPS)(PORT=2484)(HOST=leap-oracle-db.example.com))(CONNECT_DATA=(SERVICE_NAME=orclpdb1))) You will need to update the host and service name for your database instance. Create a secret for the SSL certificate used by the Oracle instance. Specify the connection properties that point to the trust or key store that contain the certificate used by your Oracle instance ${shared.resource.dir}/security/key.p12 Below is an example snippet for configuring the Leap application to use an Oracle database. configuration: leap: configOverrideFiles: oracleOverride: | Connecting to a PostgreSQL database The PostgreSQL jdbc driver has been included and can be found at ${server.config.dir}/lib. leap: configOverrideFiles: postgreSQLOverride: | Connecting to an STMP Server Below is an example snippet of configuring Leap to use a mail server. The smtphost will need to be replaced with the proper hostname of the mail server. If authentication is required to communicate with the mail server then replace smtpUser and smtpPassword with the correct values, otherwise remove those likes from the snippet. configuration: leap: configOverrideFiles: mailOverride: | Connecting to an LDAP Server Below is an example snippet of configuring Leap to use an LDAP server as part of a federated repository. The baseDN, bindDN and bindPassword will need to be replaced with the proper values. The searchBase for the ldap entity types will also need to be updated. The participatingBaseEntry will need to match the baseDN defined in the LDAP server snippet. Note: The userSecurityNameMapping and groupSecurityNameMapping are required. These properties control how users and groups are displayed while using Leap. Note: For Leap to be able to send mail the loginProperty must be set to mail. configuration: leap: configOverrideFiles: ldapOverride: | inetOrgPerson ou=People,dc=Acme groupOfUniqueNames ou=Groups,dc=Acme Configure SSL behavior The default behavior of Open Liberty is that it will not trust any default certificates, which are typically included in all mainstream browsers. By providing this config setting, the default certificates will be trusted enabling communication with third-party services. configuration: leap: configOverrideFiles: sslOverride: | ","title":"Open Liberty server customizations"},{"location":"openliberty_customized_deploy.html#section_jbb_r5s_gxb","text":"The serviceCatalog parameter can be used to pass service descriptions to Leap, which will be picked up by Leap automatically. Each service definition in the .yaml is made up of a label and the xml content of the service description. The XML content will be copied into a file and placed in the service catalog. For more information on creating service descriptions, see Service Description . Example: configuration: leap: serviceCatalog: sampleServiceDescription.xml: | sample-service-description en HTTPServiceTransport Sample service Description . . . ","title":"Service Catalog"},{"location":"openliberty_customized_deploy.html#section_ynm_t5s_gxb","text":"The leapProperties parameter can be used to add or modify properties to Leap. Note: The property ibm.nitro.NitroConfig.loginIdIsEmail must be added and set to true. Below is an example snippet of setting leap-specific properties: configuration: leap: leapProperties: | ibm.nitro.InfoEntryPoint.dailyInfo = Welcome to HCL Leap 9.3.2 in Kubernetes!
ibm.nitro.NitroConfig.serverURI=http://myleapserver.example.com ibm.nitro.NitroConfig.loginIdIsEmail = true For more information, see Configuration properties .","title":"Leap Properties"},{"location":"openliberty_customized_deploy.html#section_dc2_rjz_gxb","text":"JVM options can be specified by passing them as environment variables. The snippet below sets the maximum jvm memory usage to 2GB. environment: pod: leap: name: JVM_MAX value: \"-Xmx2048m\"","title":"JVM options"},{"location":"openliberty_customized_deploy.html#section_nfl_hhh_hxb","text":"Sometimes you may need to increase the log level to troubleshoot unexpected behavior. Below is an example of how to change the log level. logging: leap: level: Leap:*=detail:com.ibm.form.nitro.*=finest","title":"Changing the log level"},{"location":"openliberty_customized_deploy.html#section_tm4_n53_hxb","text":"Leap has several application-level roles that control who can access different features. You must map Administrative users and Edit Application users to an appropriate realm. SuperAdminUsers - Super Administrative Users are users, or groups, with administrator privileges for all Leap applications without explicit security settings. AdministrativeUsers - Administrative users are able to set up the Leap server. You must have an Administrative User to complete the installation process. EditApplicationUsers - Authenticated users that can design, deploy, and use Leap applications. UseApplicationsUsers - Authenticated users that can use deployed Leap applications. All users in the AdministrativeUsers, and EditApplicationUsers automatically have access to use deployed applications. Only adjust this setting if you want to allow a broader set of users than those listed in the AdministrativeUsers, and EditApplicationUsers roles. Otherwise, leave this role unmapped. configuration: leap: roleMapping: SuperAdminUsers: Everyone: false AllAuthenticated: false MappedUsers: - leapadmin MappedGroups: [] AllAuthenticatedInTrustedRealms: false MappedUsersAccessIDs: [] MappedGroupsAccessIDs: [] EditApplicationsUsers: Everyone: false AllAuthenticated: false MappedUsers: - leapadmin MappedGroups: [] AllAuthenticatedInTrustedRealms: false MappedUsersAccessIDs: [] MappedGroupsAccessIDs: [] AdministrativeUsers: Everyone: false AllAuthenticated: false MappedUsers: - leapadmin MappedGroups: [] AllAuthenticatedInTrustedRealms: false MappedUsersAccessIDs: [] MappedGroupsAccessIDs: [] UseApplicationsUsers: Everyone: false AllAuthenticated: false MappedUsers: [] MappedGroups: [] AllAuthenticatedInTrustedRealms: true MappedUsersAccessIDs: [] MappedGroupsAccessIDs: []","title":"Assigning User's to Leap Roles"},{"location":"ovr_overview.html","text":"Overview HCL Leap builds dynamic forms and applications with a web-based interface. From a single interface, you can design a form, define access privileges, create workflow stages, deploy the application, and review submitted results. Leap makes creating forms easier than before by dramatically reducing the time and effort that is required to deliver compelling, interactive applications. The simple web-based user interface allows a web designer to quickly assemble a series of application screens for web forms. You can also capture data into a relational database and orchestrate notifications with an integrated workflow. Data that is captured in Leap is easily integrated into existing line-of-business systems with a drag-and-drop web service interface. When users submit forms, you can view summary charts, inspect collected responses, or export data records to a spreadsheet program for detailed analysis.","title":"Overview"},{"location":"ovr_overview.html#overview","text":"HCL Leap builds dynamic forms and applications with a web-based interface. From a single interface, you can design a form, define access privileges, create workflow stages, deploy the application, and review submitted results. Leap makes creating forms easier than before by dramatically reducing the time and effort that is required to deliver compelling, interactive applications. The simple web-based user interface allows a web designer to quickly assemble a series of application screens for web forms. You can also capture data into a relational database and orchestrate notifications with an integrated workflow. Data that is captured in Leap is easily integrated into existing line-of-business systems with a drag-and-drop web service interface. When users submit forms, you can view summary charts, inspect collected responses, or export data records to a spreadsheet program for detailed analysis.","title":"Overview"},{"location":"ovr_release_notes.html","text":"Leap release notes These release notes provide a summary of new features, installation information, and descriptions of known limitations, problems, and workarounds. Category Description Link About this release New features What's New System requirements System requirements Leap system requirements Installation, migration, upgrade, and configuration information Installation instructions Deploying Leap Known limitations, problems, and workarounds Troubleshooting, Limitations, problems, and workarounds Troubleshooting Contacting customer support Customer support Leap flashes, alerts, and bulletins","title":"Release Notes"},{"location":"ovr_release_notes.html#releasenotes","text":"These release notes provide a summary of new features, installation information, and descriptions of known limitations, problems, and workarounds. Category Description Link About this release New features What's New System requirements System requirements Leap system requirements Installation, migration, upgrade, and configuration information Installation instructions Deploying Leap Known limitations, problems, and workarounds Troubleshooting, Limitations, problems, and workarounds Troubleshooting Contacting customer support Customer support Leap flashes, alerts, and bulletins","title":"Leap release notes"},{"location":"prepare_config_helm.html","text":"Prepare configuration Create a configuration file that fits the needs of your target HCL Leap Container deployment. The configuration file is the heart of your deployment using Helm. It defines how HCL Leap is deployed to supported platforms, and how it behaves during runtime operations. This section explains how to create your own configuration file and how to leverage the existing values.yaml inside the Helm Chart. It also explains how to optionally overwrite settings in case the default set may not be sufficient. Note: Modification to any files (chart.yaml, templates) in hcl-leap-deployment-vX.X.X_XXXXXXXX-XXXX.tar.gz is not supported. The configuration flow Helm provides multiple ways to define values that can be processed to run an installation. Processing involves a three-step approach, that is ordered sequentially within a hierarchy. Helm Chart values.yaml Every Helm Chart contains a values.yaml file. It defines all configurable parameters that a Helm Chart accepts and the default values that are used during an installation. If you do not provide any other configuration during an installation, Helm extracts all deployment information from the values.yaml file inside the Helm Chart. All parameters that were not overwritten using any other configuration methods return to their default values from the values.yaml file inside the Helm Chart. Custom value file Helm provides you with a way to maintain your own custom values files. You can specify a custom values file you want to use when running an installation. This custom values file only needs to contain the parameters that you want to overwrite with your preferred settings. Note: There is no need to have the same complete set of parameters inside your custom values file, as there are available by default in the Helm Chart values.yaml. As outlined previously in this section, everything that is not defined in your custom values file are applied using the defaults from values.yaml inside the Helm Charts. Be aware that the parameters you can configure using your custom values file need to exactly align with those provided by the Helm Charts own values.yaml. You cannot configure anything that is not exposed in the values.yaml definition. Override parameters It is possible to define values using a --set parameter in the Helm CLI during the installation of a Helm Chart. Since there are many values that can be configured in the HCL Leap deployment, we do not recommend this technique, since it makes installation commands very large and confusing. The default HCL Leap Container values.yaml file HCL Leap Helm Chart provides a default values.yaml, which contains all possible configuration parameters. To access this file, you may use the following command when you have the HCL Leap or later Helm Chart tar.gz file on hand: # Command to show values from Helm Chart helm show values hcl-leap-deployment.tar.gz What appears in the console is all the configurable parameters and their default values. A custom configuration file Helm allows you to provide a custom configuration file during the installation or upgrade process. That file only overwrites settings that are defined within it. For parts of the configuration that are not defined in your custom configuration file, Helm returns to the default values in the values.yaml file inside the Leap Helm Chart. This allows you to keep the overall size of your configuration file small and the maintainability high. This documentation refers to the custom configuration file as custom-values.yaml. You may name your custom configuration file as preferred. Note: Including all of the parameters from the values.yaml is not necessary and may bloat your configuration file with values that are already present in the Leap Helm Chart. Only specify what you want to change from its default value. Parent topic: Preparation","title":"Prepare configuration"},{"location":"prepare_config_helm.html#prepare_config_helm","text":"Create a configuration file that fits the needs of your target HCL Leap Container deployment. The configuration file is the heart of your deployment using Helm. It defines how HCL Leap is deployed to supported platforms, and how it behaves during runtime operations. This section explains how to create your own configuration file and how to leverage the existing values.yaml inside the Helm Chart. It also explains how to optionally overwrite settings in case the default set may not be sufficient. Note: Modification to any files (chart.yaml, templates) in hcl-leap-deployment-vX.X.X_XXXXXXXX-XXXX.tar.gz is not supported.","title":"Prepare configuration"},{"location":"prepare_config_helm.html#section_imf_zh4_hzb","text":"Helm provides multiple ways to define values that can be processed to run an installation. Processing involves a three-step approach, that is ordered sequentially within a hierarchy.","title":"The configuration flow"},{"location":"prepare_config_helm.html#section_mkj_134_hzb","text":"Every Helm Chart contains a values.yaml file. It defines all configurable parameters that a Helm Chart accepts and the default values that are used during an installation. If you do not provide any other configuration during an installation, Helm extracts all deployment information from the values.yaml file inside the Helm Chart. All parameters that were not overwritten using any other configuration methods return to their default values from the values.yaml file inside the Helm Chart.","title":"Helm Chart values.yaml"},{"location":"prepare_config_helm.html#section_rmd_d34_hzb","text":"Helm provides you with a way to maintain your own custom values files. You can specify a custom values file you want to use when running an installation. This custom values file only needs to contain the parameters that you want to overwrite with your preferred settings. Note: There is no need to have the same complete set of parameters inside your custom values file, as there are available by default in the Helm Chart values.yaml. As outlined previously in this section, everything that is not defined in your custom values file are applied using the defaults from values.yaml inside the Helm Charts. Be aware that the parameters you can configure using your custom values file need to exactly align with those provided by the Helm Charts own values.yaml. You cannot configure anything that is not exposed in the values.yaml definition.","title":"Custom value file"},{"location":"prepare_config_helm.html#section_e5x_h34_hzb","text":"It is possible to define values using a --set parameter in the Helm CLI during the installation of a Helm Chart. Since there are many values that can be configured in the HCL Leap deployment, we do not recommend this technique, since it makes installation commands very large and confusing.","title":"Override parameters"},{"location":"prepare_config_helm.html#section_ftl_k34_hzb","text":"HCL Leap Helm Chart provides a default values.yaml, which contains all possible configuration parameters. To access this file, you may use the following command when you have the HCL Leap or later Helm Chart tar.gz file on hand: # Command to show values from Helm Chart helm show values hcl-leap-deployment.tar.gz What appears in the console is all the configurable parameters and their default values.","title":"The default HCL Leap Container values.yaml file"},{"location":"prepare_config_helm.html#section_z5g_434_hzb","text":"Helm allows you to provide a custom configuration file during the installation or upgrade process. That file only overwrites settings that are defined within it. For parts of the configuration that are not defined in your custom configuration file, Helm returns to the default values in the values.yaml file inside the Leap Helm Chart. This allows you to keep the overall size of your configuration file small and the maintainability high. This documentation refers to the custom configuration file as custom-values.yaml. You may name your custom configuration file as preferred. Note: Including all of the parameters from the values.yaml is not necessary and may bloat your configuration file with values that are already present in the Leap Helm Chart. Only specify what you want to change from its default value. Parent topic: Preparation","title":"A custom configuration file"},{"location":"ref_application_object.html","text":"Application objects Table 1. Application Object (app) The Leap application object provides access to information relevant to the whole application. Object Description Example app.getAppPage\\(appPageId\\) Returns the user interface app page object for the provided var myAppPage = app.getAppPage(\u201cAP_Welcome\u201d); app.getAppPageURL(appPageId, appUid) Returns the URL for navigating directly to the app page for the provided app page id and application uid. Note: The appUid parameter is optional. If you do not supply a parameter, it will be set to the object in the current scope. app.getAppURL\\(\\) Returns the URL for navigating directly to the application. Note: The application will load the form or app page defined in the \u201cHome Page\u201d field on the Settings tab. app.getChartsURL\\(formId, appUid\\) Returns the URL for navigating directly to the charts page of the form for the provided form uid and application uid. Note: All parameters are optional. If you do not supply a parameter, it will be set to the object in the current scope. var url = app.getChartsURL(form.getId(), app.getUID()); app.getCurrentUser\\(\\) Returns the identifying name of the currently logged in user. The identifying name is the property as defined by the ibm.was.MemberManager.userProps.id property that is located in the Leap\\_config.properties file. For example, uid , cn , mail , displayName . If the Initiator Role is set to Anonymous User , then the function returns the string \u201cAnonymous Guest User\u201d. To populate the current user's login name into a field in the form, place the following statement in the onLoad event of the form: Note: The following code must be entered as a single line. //change F_SingleLine to the ID of the desired field BO.F_SingleLine.setValue(app.getCurrentUser()); app.getCurrentUserId\\(\\) Returns the user's \"identifier\" - the identifying name of the currently logged in user. The identifying name is the property as defined by the ibm.was.MemberManager.userProps.id property that is located in the Leap\\_config.properties file. For example, uid , cn , mail , displayName . If the Initiator Role is set to Anonymous User , then the function returns the string \u201cAnonymous Guest User\u201d. app.getCurrentUserEmail\\(\\) Returns the user's email. app.getCurrentUserDisplayName\\(\\) |Returns the user's full display name. Ex. \"Eduardo Ram\u00edrez L\u00f3pez\". app.getCurrentUserInfo\\(\\) Returns the object containing the attributes of the current user. For example: {id: \"pflorez123\", email: \"Pedro.Flores@example.com\", displayName: \"Pedro Flores\", userType: \"owner\"} Note: Not all attributes are available in all deployments. In that case, some of these values will be null. userType ** \u2013 possible values: \"owner\" \u2013 if current user is the app owner \"guest\" \u2013 if the current user is anonymous \"\" \\(empty string\\) \u2013 in all other cases app.getCurrentUserRoles Returns a comma-separated list of all the roles for which the current user is a member. For example: item.setValue(app.getCurrentUserRoles()); app.getFileBaseURL\\(\\) Returns the relative URL to the current browser page where all files that are uploaded into the application at design time are stored. This does not include images and CSS files. All files are saved as anonymous resources that can be viewed by anyone. An example url is ../../../../../anon/1/content/8.6.0.363/97eeb588-2fff-49a7-89c1-5000885dafb4/1421171344944-2/desktop/en/en/en/desktop/files/ app.getForm\\(formID\\) Returns the user interface form object for the provided formID. If used to return a form that is not shown or loaded, then the object that is returned is not fully operational and should be used for hooking up dynamic event handlers only. Register an event listener to a service in order to do something when it returns: var form = app.getForm('F_Form1'); var service = form.getServiceConfiguration('SC_ServiceConfig0'); service.connectEvent('onCallFinished', function(pSuccess) { alert('call finished'); }); app.getFormLaunchURL\\(formId, appUid\\) Returns the URL for navigating directly to the form for the provided application uid and form uid. Note: All parameters are optional. If you do not supply a parameter, it will be set to the object in the current scope. var url = app.getFormLaunchURL(); var url = app.getFormLaunchURL(form.getId()); var url = app.getFormLaunchURL(form.getId(), app.getUID()); app.getImageBaseURL\\(\\) Returns the relative URL to the current browser page where all images that are uploaded into the application at design time are stored. All images are saved as anonymous resources that can be viewed by anyone. An example url is ../../../../../anon/1/content/8.6.0.363/97eeb588-2fff-49a7-89c1-5000885dafb4/1421171344944-2/desktop/en/en/en/desktop/image/ app.getLocale\\(\\) Returns the current locale of the application, according to the application's settings or the current user's preferences. The returned value is a locale code, in accordance with [Tags for the Identification of Languages \\(RFC 3066\\)](https://www.ietf.org/rfc/rfc3066.txt). app.getLocation\\(callbackFunction, highAccuracy\\) Allows the form designer to get the current user's location. callbackFunction - the callback that occurs after the location request finishes. The designer must define the function to have one argument which will be assigned a Position object if the location request was successful, or null if the request was unsuccessful. Inside the function the designer can assign location attributes to different fields. Five values can be accessed: position.coords.latitude position.coords.longitude position.coords.accuracy position.coords.altitude position.coords.altitudeAccuracy More information in [https://developer.mozilla.org/en-US/docs/Web/API/Position/](https://developer.mozilla.org/en-US/docs/Web/API/Position/). highAccuracy - a boolean value that requests a high accuracy location from the browser if true. See [https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions/enableHighAccuracy](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions/enableHighAccuracy). Set the value of F\\_SingleLine1 to the current location: ``` var highAccuracy = true; var myCallbackFunction = function (position) { if (position !== null) { BO.F_SingleLine1.setValue(position.coords.latitude+\", \"+position.coords.longitude); } else { alert(\"Location request failed\"); } }; app.getLocation(myCallbackFunction,highAccuracy); app.getProductBaseURL\\(\\) | Returns the host and context of the Leap server. | var url = app.getProductBaseURL(); |
app.getRecordURL\\(recordUid, formId, appUid\\) | Returns the URL for navigating directly to the record. Note: All parameters are optional. If you do not supply a parameter, it will be set to the object in the current scope. | var url = app.getRecordURL(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019); var url = app.getRecordURL(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019, form.getId()); var url = app.getRecordURL(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019, form.getId(), app.getUID()); |app.getSharedData\\(\\)|Returns a JavaScript\u2122 object that can be easily accessed from all custom JavaScript code on the form, and is the suggested location to share data, or create reusable functions.|Create some data and functions to be used later:``` app.getSharedData().titleToShow = 'Welcome Form'; app.getSharedData().addTwoValues = function(v1,v2) { return v1 + v2; }; Example of referencing the established variable and function:``` BO.F_SingleLine.setValue(app.getSharedData().titleToShow); BO.F_Number.setValue(app.getSharedData().addTwoValues(5, 5)); | |app.getStyleBaseURL\\(\\)|Returns the relative URL to the current browser page where all CSS style files that are uploaded into the application at design time are stored. All css files are saved as anonymous resources that can be viewed by anyone. An example url is ../../../../../anon/1/content/8.6.0.363/97eeb588-2fff-49a7-89c1-5000885dafb4/1421171344944-2/desktop/en/en/en/desktop/styles/| | |app.getSuppressWarning\\(\\)|Gets the current set value for suppressing the warning. See setSuppressWarning for information.|``` var suppressWarning = app.getSuppressWarning(); if(suppressWarning === false) app.setSuppressWarning(true); | |app.getUID\\(\\)|The UID of the application|Can be used to create a link to another form ``` page.F_StaticWebLink.setLinkValue(BO.F_ServerURL.getValue() + '/apps/secure/1/app/' + app.getUID() + '/launch/index.html?form=F_Form2')); | |app.getUrlParameter\\(parm\\)|Looks up a single parameter.|``` var param= app.getUrlParameter('debug') if(param === 'true') alert('Shown only when debug param is present'); | |app.getUrlParameters\\(\\)|Returns an object with all URL parameters.|``` var params = app.getUrlParameters(); if(params.CustomWarning) alert(params.CustomWarning); | |app.getViewDataURL\\(appUid\\)|Returns the URL for navigating directly to the View Data page. **Note:** The parameter is optional. If you do not supply a parameter, it will be set to the object in the current scope. |``` var url = app.getViewDataURL(); var url = app.getViewDataURL(app.getUID()); | |app.isCurrentUserInRole\\(roleName\\)|Returns true if the current user is a member of the provided role, otherwise false.**Note:** The function does not validate the role with the provided roleName, therefore if the role does not exist false is returned. |For example:``` item.setValue(app.isCurrentUserInRole(\"Manager\")); | |app.isSingleFormView\\(\\)|Returns true if the form is shown by itself in the browser and false if it is shown in view data.| | |app.openApp\\(appUid, newTab\\)|Opens the home page of an application. The current app is used if you do not supply an app id. If \u201cnewTab\u201d is \u201ctrue\u201d, the app is presented in a new browser tab. The default behavior is for the application to be opened in a new tab. |``` app.openApp(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019); app.openApp (\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019, true); app.openApp (app.getUID(), false); | |app.openAppPage\\(appPageId, appUid, newTab\\)|Opens the app page of an application that matches the provided *appPageid*. **Note:** appUid and newTab are optional. If you do not supply a parameter, it will be set to the object in the current scope. The default behavior is for the application to be opened in a new tab. |``` app.openAppPage(\u2018AP_Page1\u2019); app.openAppPage (\u2018AP_Page1\u2019, true); app.openAppPage (\u2018AP_Page1\u2019, false); | |app.openForm\\(formId, appUid, newTab\\)|Opens the form of an application that matches the provided *formId*. **Note:** appUid and newTab are optional. If you do not supply a parameter, it will be set to the object in the current scope. The default behavior is for the application to be opened in a new tab. |``` app.openForm(\u2018F_Form1\u2019); app.openForm(\u2018F_Form1\u2019, true); app.openForm (\u2018F_Form1\u2019, false); | |openRecord\\(recordUid, formId, appUid, newTab\\)|Opens the record of a form that matches the provided *recordId* and *formId*. **Note:** formId, appUid and newTab are optional. If you do not supply a parameter, it will be set to the object in the current scope. The default behavior is for the application to be opened in a new tab. |``` app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019); app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019, \u2018yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy\u2019); app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019, \u2018yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy\u2019, true); app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019, \u2018yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy\u2019, \u2018zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz\u2019, false); | |app.setSuppressWarning\\(pSuppress\\)|If a user interacts with a form, or JavaScript, they are prompted with a warning message whenever the current browser page tries to navigate to a different URL. This function allows the suppression of that warning. When set to true the message is suppressed until it is set to false again|Can be used at any scope, for example in the application onStart, form onLoad, onItemChange, etc.``` app.setSuppressWarning(true); | |app.showMessage\\(title, message, type, subtitle\\) |Allow usage of a built-in dialog for end-user messages. title: The title to display in the dialog title bar. message: The message text to display. type \\(optional\\): can be one of \"info\", \"success\", \"warn\", or \"error\" and results in appropriate icon being displayed. If type is absent or not one of these values, then no icon will be displayed. subtitle \\(optional\\): Heading text for the message. |``` app.showMessage (\"Error found in data\", \"The booking date cannot be after the event.\", \"error\", \"Please change the booking or event date, then re-submit.\"); ``` | **Parent topic: **[Interface objects](ref_jsapi_user_interface_objects.md)","title":"Application objects"},{"location":"ref_application_object.html#application-objects","text":"Table 1. Application Object (app) The Leap application object provides access to information relevant to the whole application. Object Description Example app.getAppPage\\(appPageId\\) Returns the user interface app page object for the provided var myAppPage = app.getAppPage(\u201cAP_Welcome\u201d); app.getAppPageURL(appPageId, appUid) Returns the URL for navigating directly to the app page for the provided app page id and application uid. Note: The appUid parameter is optional. If you do not supply a parameter, it will be set to the object in the current scope. app.getAppURL\\(\\) Returns the URL for navigating directly to the application. Note: The application will load the form or app page defined in the \u201cHome Page\u201d field on the Settings tab. app.getChartsURL\\(formId, appUid\\) Returns the URL for navigating directly to the charts page of the form for the provided form uid and application uid. Note: All parameters are optional. If you do not supply a parameter, it will be set to the object in the current scope. var url = app.getChartsURL(form.getId(), app.getUID()); app.getCurrentUser\\(\\) Returns the identifying name of the currently logged in user. The identifying name is the property as defined by the ibm.was.MemberManager.userProps.id property that is located in the Leap\\_config.properties file. For example, uid , cn , mail , displayName . If the Initiator Role is set to Anonymous User , then the function returns the string \u201cAnonymous Guest User\u201d. To populate the current user's login name into a field in the form, place the following statement in the onLoad event of the form: Note: The following code must be entered as a single line. //change F_SingleLine to the ID of the desired field BO.F_SingleLine.setValue(app.getCurrentUser()); app.getCurrentUserId\\(\\) Returns the user's \"identifier\" - the identifying name of the currently logged in user. The identifying name is the property as defined by the ibm.was.MemberManager.userProps.id property that is located in the Leap\\_config.properties file. For example, uid , cn , mail , displayName . If the Initiator Role is set to Anonymous User , then the function returns the string \u201cAnonymous Guest User\u201d. app.getCurrentUserEmail\\(\\) Returns the user's email. app.getCurrentUserDisplayName\\(\\) |Returns the user's full display name. Ex. \"Eduardo Ram\u00edrez L\u00f3pez\". app.getCurrentUserInfo\\(\\) Returns the object containing the attributes of the current user. For example: {id: \"pflorez123\", email: \"Pedro.Flores@example.com\", displayName: \"Pedro Flores\", userType: \"owner\"} Note: Not all attributes are available in all deployments. In that case, some of these values will be null. userType ** \u2013 possible values: \"owner\" \u2013 if current user is the app owner \"guest\" \u2013 if the current user is anonymous \"\" \\(empty string\\) \u2013 in all other cases app.getCurrentUserRoles Returns a comma-separated list of all the roles for which the current user is a member. For example: item.setValue(app.getCurrentUserRoles()); app.getFileBaseURL\\(\\) Returns the relative URL to the current browser page where all files that are uploaded into the application at design time are stored. This does not include images and CSS files. All files are saved as anonymous resources that can be viewed by anyone. An example url is ../../../../../anon/1/content/8.6.0.363/97eeb588-2fff-49a7-89c1-5000885dafb4/1421171344944-2/desktop/en/en/en/desktop/files/ app.getForm\\(formID\\) Returns the user interface form object for the provided formID. If used to return a form that is not shown or loaded, then the object that is returned is not fully operational and should be used for hooking up dynamic event handlers only. Register an event listener to a service in order to do something when it returns: var form = app.getForm('F_Form1'); var service = form.getServiceConfiguration('SC_ServiceConfig0'); service.connectEvent('onCallFinished', function(pSuccess) { alert('call finished'); }); app.getFormLaunchURL\\(formId, appUid\\) Returns the URL for navigating directly to the form for the provided application uid and form uid. Note: All parameters are optional. If you do not supply a parameter, it will be set to the object in the current scope. var url = app.getFormLaunchURL(); var url = app.getFormLaunchURL(form.getId()); var url = app.getFormLaunchURL(form.getId(), app.getUID()); app.getImageBaseURL\\(\\) Returns the relative URL to the current browser page where all images that are uploaded into the application at design time are stored. All images are saved as anonymous resources that can be viewed by anyone. An example url is ../../../../../anon/1/content/8.6.0.363/97eeb588-2fff-49a7-89c1-5000885dafb4/1421171344944-2/desktop/en/en/en/desktop/image/ app.getLocale\\(\\) Returns the current locale of the application, according to the application's settings or the current user's preferences. The returned value is a locale code, in accordance with [Tags for the Identification of Languages \\(RFC 3066\\)](https://www.ietf.org/rfc/rfc3066.txt). app.getLocation\\(callbackFunction, highAccuracy\\) Allows the form designer to get the current user's location. callbackFunction - the callback that occurs after the location request finishes. The designer must define the function to have one argument which will be assigned a Position object if the location request was successful, or null if the request was unsuccessful. Inside the function the designer can assign location attributes to different fields. Five values can be accessed: position.coords.latitude position.coords.longitude position.coords.accuracy position.coords.altitude position.coords.altitudeAccuracy More information in [https://developer.mozilla.org/en-US/docs/Web/API/Position/](https://developer.mozilla.org/en-US/docs/Web/API/Position/). highAccuracy - a boolean value that requests a high accuracy location from the browser if true. See [https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions/enableHighAccuracy](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions/enableHighAccuracy). Set the value of F\\_SingleLine1 to the current location: ``` var highAccuracy = true; var myCallbackFunction = function (position) { if (position !== null) { BO.F_SingleLine1.setValue(position.coords.latitude+\", \"+position.coords.longitude); } else { alert(\"Location request failed\"); } }; app.getLocation(myCallbackFunction,highAccuracy); | app.getProductBaseURL\\(\\) | Returns the host and context of the Leap server. | var url = app.getProductBaseURL(); |
app.getRecordURL\\(recordUid, formId, appUid\\) | Returns the URL for navigating directly to the record. Note: All parameters are optional. If you do not supply a parameter, it will be set to the object in the current scope. | var url = app.getRecordURL(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019); var url = app.getRecordURL(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019, form.getId()); var url = app.getRecordURL(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019, form.getId(), app.getUID()); |app.getSharedData\\(\\)|Returns a JavaScript\u2122 object that can be easily accessed from all custom JavaScript code on the form, and is the suggested location to share data, or create reusable functions.|Create some data and functions to be used later:``` app.getSharedData().titleToShow = 'Welcome Form'; app.getSharedData().addTwoValues = function(v1,v2) { return v1 + v2; }; Example of referencing the established variable and function:``` BO.F_SingleLine.setValue(app.getSharedData().titleToShow); BO.F_Number.setValue(app.getSharedData().addTwoValues(5, 5)); | |app.getStyleBaseURL\\(\\)|Returns the relative URL to the current browser page where all CSS style files that are uploaded into the application at design time are stored. All css files are saved as anonymous resources that can be viewed by anyone. An example url is ../../../../../anon/1/content/8.6.0.363/97eeb588-2fff-49a7-89c1-5000885dafb4/1421171344944-2/desktop/en/en/en/desktop/styles/| | |app.getSuppressWarning\\(\\)|Gets the current set value for suppressing the warning. See setSuppressWarning for information.|``` var suppressWarning = app.getSuppressWarning(); if(suppressWarning === false) app.setSuppressWarning(true); | |app.getUID\\(\\)|The UID of the application|Can be used to create a link to another form ``` page.F_StaticWebLink.setLinkValue(BO.F_ServerURL.getValue() + '/apps/secure/1/app/' + app.getUID() + '/launch/index.html?form=F_Form2')); | |app.getUrlParameter\\(parm\\)|Looks up a single parameter.|``` var param= app.getUrlParameter('debug') if(param === 'true') alert('Shown only when debug param is present'); | |app.getUrlParameters\\(\\)|Returns an object with all URL parameters.|``` var params = app.getUrlParameters(); if(params.CustomWarning) alert(params.CustomWarning); | |app.getViewDataURL\\(appUid\\)|Returns the URL for navigating directly to the View Data page. **Note:** The parameter is optional. If you do not supply a parameter, it will be set to the object in the current scope. |``` var url = app.getViewDataURL(); var url = app.getViewDataURL(app.getUID()); | |app.isCurrentUserInRole\\(roleName\\)|Returns true if the current user is a member of the provided role, otherwise false.**Note:** The function does not validate the role with the provided roleName, therefore if the role does not exist false is returned. |For example:``` item.setValue(app.isCurrentUserInRole(\"Manager\")); | |app.isSingleFormView\\(\\)|Returns true if the form is shown by itself in the browser and false if it is shown in view data.| | |app.openApp\\(appUid, newTab\\)|Opens the home page of an application. The current app is used if you do not supply an app id. If \u201cnewTab\u201d is \u201ctrue\u201d, the app is presented in a new browser tab. The default behavior is for the application to be opened in a new tab. |``` app.openApp(\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019); app.openApp (\u2018d1f6eb71-9483-479c-8d47-dd30bd7e9de9\u2019, true); app.openApp (app.getUID(), false); | |app.openAppPage\\(appPageId, appUid, newTab\\)|Opens the app page of an application that matches the provided *appPageid*. **Note:** appUid and newTab are optional. If you do not supply a parameter, it will be set to the object in the current scope. The default behavior is for the application to be opened in a new tab. |``` app.openAppPage(\u2018AP_Page1\u2019); app.openAppPage (\u2018AP_Page1\u2019, true); app.openAppPage (\u2018AP_Page1\u2019, false); | |app.openForm\\(formId, appUid, newTab\\)|Opens the form of an application that matches the provided *formId*. **Note:** appUid and newTab are optional. If you do not supply a parameter, it will be set to the object in the current scope. The default behavior is for the application to be opened in a new tab. |``` app.openForm(\u2018F_Form1\u2019); app.openForm(\u2018F_Form1\u2019, true); app.openForm (\u2018F_Form1\u2019, false); | |openRecord\\(recordUid, formId, appUid, newTab\\)|Opens the record of a form that matches the provided *recordId* and *formId*. **Note:** formId, appUid and newTab are optional. If you do not supply a parameter, it will be set to the object in the current scope. The default behavior is for the application to be opened in a new tab. |``` app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019); app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019, \u2018yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy\u2019); app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019, \u2018yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy\u2019, true); app.openRecord(\u2018xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\u2019, \u2018yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy\u2019, \u2018zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz\u2019, false); | |app.setSuppressWarning\\(pSuppress\\)|If a user interacts with a form, or JavaScript, they are prompted with a warning message whenever the current browser page tries to navigate to a different URL. This function allows the suppression of that warning. When set to true the message is suppressed until it is set to false again|Can be used at any scope, for example in the application onStart, form onLoad, onItemChange, etc.``` app.setSuppressWarning(true); | |app.showMessage\\(title, message, type, subtitle\\) |Allow usage of a built-in dialog for end-user messages. title: The title to display in the dialog title bar. message: The message text to display. type \\(optional\\): can be one of \"info\", \"success\", \"warn\", or \"error\" and results in appropriate icon being displayed. If type is absent or not one of these values, then no icon will be displayed. subtitle \\(optional\\): Heading text for the message. |``` app.showMessage (\"Error found in data\", \"The booking date cannot be after the event.\", \"error\", \"Please change the booking or event date, then re-submit.\"); ``` | **Parent topic: **[Interface objects](ref_jsapi_user_interface_objects.md)","title":"Application objects"},{"location":"ref_customized_css.html","text":"Creating customized Cascading Style Sheets You can apply your own custom Cascading Style Sheet (CSS) to the rendering of your HCL Leap application. To create a custom theme, you must be familiar with the basic concepts of CSS. Elements are assigned specific class names, prefaced by lf in the custom theme. The following code is an example of a Leap custom theme. /* Form - centered with a drop shadow*/ .lfMn .lfAppFormArea .lfFormBox { -moz-box-shadow: 5px 5px 12px #AEA4A4; -webkit-box-shadow: 5px 5px 12px #AEA4A4; box-shadow: 5px 5px 12px #AEA4A4; margin-right: auto; margin-left: auto; } /* Text (item titles) - medium blue */ .lfMn .lfFormLabel { color: #094291 !important; } /* Section - title bar red background and white text */ .lfMn .lfFormFieldSectionTitle { background: #cd111f !important; color: white !important; font-size: 13px !important; font-weight: bold !important; } .lfMn .lfFormFieldSectionTitle .lfFormLabel { color: white !important; } /* Tabs - dark-blue background with white text */ .lfMn .lfFormFieldTabFolder .lfFormFieldTab { background:#1556a8; border-top-color:#666; border-right-color:#666; border-left-color:#666; } .lfMn .lfFormFieldTabFolder .lfFormFieldTab * { color: white; } /* Tabs (selected) - white background with black text */ .lfMn .lfFormFieldTabFolder .lfFormFieldTabChecked, .lfMn.lotusui .lfFormFieldTabFolder .lfFormFieldTabCheckedHover, .lfMn.lotusui .lfFormFieldTabFolder .lfFormFieldTabCheckedError { background: white; border-top-color:#ccc; border-right-color:#ccc; border-left-color:#ccc; } .lfMn .lfFormFieldTabFolder .lfFormFieldTabChecked * { color: #222 !important; } /* Button (Submit) - light blue background */ .lfMn .lfFormBtn.lfFormActionSubmitBtn { font-size: 12px; background: #93bef3; border: 1px solid #222; font-weight: bold; } .lfMn .lfFormBtn.lfFormActionSubmitBtn * { font-weight: bold; } /* Button (Page Navigation) - dark blue background with white text*/ .lfMn .lfPageNavigation .lfFormBtn { background: #1556a8 !important; border: 1px solid #222; } .lfMn .lfPageNavigation .lfFormBtn *, .lfMn .lfPageNavigation .lfFormBtn * { color: white !important; font-weight: bold; } Class Names View Data layout Class names for the View Data layout are: .lfAppForm .lfAppFormArea .lfAppMainArea .lfAppOverviewArea .lfBanner .lfFormTitleBar .lfMn.lfAppArea The following graphic shows where the class names for various parts of the View Data section are located. Single form launch layout Class names for the Single form launch layout are: .lfAppForm .lfAppFormArea .lfAppMainArea .lfBanner .lfFormBody .lfFormBox .lfFormFooter .lfFormTitleBar .lfMn.lfSingleFormArea The following graphic shows where the class names for various parts of the Single form launch layout are located. Form items - general General class names are: .lfFormField .lfFormFieldError .lfFormFieldHint .lfFormFieldRequiredMarker .lfFormLabel The following graphic shows where the class names for general form items are located. In addition to the general lfFormField class, each form item has a unique class name: Attachment \u2013 lfFormFieldAttachment Button \u2013 lfFormFieldButton Check box \u2013 lfFormFieldCheckBox Choice Slider - lfFormFieldChoiceSlider Currency \u2013 lfFormFieldCurrency Date \u2013 lfFormFieldDate Drop-down \u2013 lfFormFieldDropDown Email \u2013 lfFormFieldEmail HTML fragment \u2013 lfFormFieldHTML Image \u2013 lfFormFieldImage Line \u2013 lfFormFieldHorizontalLine Media \u2013 lfFormFieldMedia Multi-line entry \u2013 lfFormFieldParagraph Number \u2013 lfFormFieldNumber Numeric Slider - lfFormFieldHorizontalSlider Page navigator \u2013 lfFormFieldPageNavigator Password \u2013 lfFormFieldPassword Text \u2013 lfFormFieldRichText Section \u2013 lfFormFieldSection Select many \u2013 lfFormFieldSelectMany Select one \u2013 lfFormFieldSelectOne Single-line entry \u2013 lfFormFieldSingleLine Survey \u2013 lfFormFieldSurvey Tabbed folder \u2013 lfFormFieldTabFolder Table \u2013 lfFormFieldTable Time \u2013 lfFormFieldTime Time stamp \u2013 lfFormFieldTimestamp Web link \u2013 lfFormFieldStaticWeblink Website \u2013 lfFormFieldWebSiteAddress Required form items also have an extra lfFormFieldRequired class. The lfFormFieldInvalid class is added to form items that are invalid. Section Class names for Section are: .lfFormFieldSection .lfFormFieldSectionBody .lfFormFieldSectionTitle The following graphic shows where the class names used in creating a Section are located. Survey Class names for Survey are: .lfFormFieldSurvey .lfFormFieldSurveyQuestion .lfFormFieldSurveyQuestionText .lfFormFieldSurveyTable .lfFormFieldSurveyTitle .lfFormRequired The following graphic shows where the class names used in creating a Survey are located. Tabbed Folder Class names for Tabbed Folder are: .lfFormFieldTab .lfFormFieldTabChecked .lfFormFieldTabContent .lfFormFieldTabFolder The following graphic shows where the class names used in creating a Tabbed Folder are located. Buttons Class names for Buttons are: .lfFormBtn .lfFormActionBtn .lfFormActionCancelBtn .lfFormActionSubmitBtn .lfFormBackBtn .lfFormFieldButton .lfFormNextBtn .lfPageNavigation The following graphic shows where the class names for creating buttons on a form are located. Dialogs Class names for Dialogs are: .lfDialog .lfDialogContent .lfDialogFooter .lfDialogTitle The following graphic shows where the class names for creating dialog windows are located. Usage details Your custom CSS is the last style sheet that is applied in an application. However, you must ensure that your CSS rules are more specific (higher weighted) than the ones already specified in the base CSS rules. In some cases, you must append the !important declaration to your rules to override the Leap base rules. For example, to change the font color of all item titles use .lfMn .lfFormLabel {color: #094291 !important}. In some cases you must add the universal, \u201c*\u201d, selector to your rules. For example, to change the font color of all buttons use .lfMn .lfFormBtn * {color: white} To reference image files that are contained within the same application, use a relative URL of ../image/.... For example, to reference the image named background.jpg contained within your application, use url('../image/background.jpg'). For more information about referencing image files within an application, see Managing the files associated with your application Note: Pop-up menus and dialogs are direct childs of the main body, even when they appear to be otherwise. These child menus and dialogs must be styled to match the main body. Best Practices There are no technical limitations to the CSS rules that can be applied to a form; however there are the following best practices: All CSS rules must begin with the .lfMn class selector. This is important for forms that might be shown within the context of another web page, such as in the IBM\u00ae WebSphere\u00ae Portal environment. Base your CSS rules around class names that are prefixed with \u201clf\u201d. For example: lfFormFieldSingleLine. These class names that are likely to remain consistent between Leap releases. Your custom styles are not restricted, so you must be specific with your selectors. Selectors that are too broad affect all aspects of theLeap interface, including all dialogs and all elements within the View Data interface. Your CSS must target the browsers that are supported by Leap. If possible, avoid CSS rules that affect the size and positioning of elements. You might want to specify some custom padding and margins, but it is your responsibility to ensure that no erroneous cropping or extra scroll-bars are displayed. We recommend that you limit your theme to the following properties: background color background image \u2013 typically for background gradients color font font size border \u2013 typically none or one pixel width Styling individual form items Each item on the form is assigned a unique class name. The syntax for this class name is |