- This topic has 13 replies, 4 voices, and was last updated 1 month, 1 week ago by
.
-
Posts
-
-
To use all these examples you must have v1.0.12.0 or later
Updated September 07, 2023: Updated dffs_showModal code example and added dffs_hideModal
Please note that you can do most of this with rules. Using Custom JS is an option for advanced users.
Do something before the item is saved
You can use a function like this to run your own custom code before save. The function must return true to allow save, or false to stop the save. If you use this function it will run before the rules triggering on “Before save of the form” and “After save of the form”. If your function returns false the rules described will not run.
function dffs_PreSaveAction() { // This example will prevent save if the title field value is not "test" if (getFieldValue("Title") !== "test") { alert("Nope, you cannot save!"); return false; } // Allow save return true; }Do something after the item is saved
You can use a function like this to run your own custom code after the item is saved
function dffs_PostSaveAction() { // Do something after the item is saved - for example redirect to another page // You can read values from the current item using getFieldValue("Name_of_field") location.href = "https://contoso.com/SavedMsg"; }Do something if the item is cancelled / closed
You can use a function like this to run your own custom code if a form is opened and then cancelled out of without saving.
function dffs_PostCancelAction() { // Do something if the item is cancelled - for example redirect to another page location.href = "https://contoso.com/CancelMsg"; }Do something if the item is deleted
You can use a function like this to run your own custom code after an item is deleted (from within a form, not from the list view menu).
function dffs_PostDeleteAction() { // Do something if the item is deleted - for example redirect to another page location.href = "https://contoso.com/DeletedMsg"; }Show a modal dialog
To show a modal dialog with a custom message you can use this code. Please note that this will be a non-blocking dialog so it will not prevent other code from running when the dialog is shown (like the default browser “alert” function does).
var modalId = dffs_showModal({ "title": "A message to you", "body": "Add your message body here. You can use plain text or HTML", "isBlocking": true, "showClose": true, "showFooter": true, "closeCallbackFn": () => { // Add your custom code that runs when the dialog has been dismissed alert("Closed"); }, "cancelBtnLabel": "Cancel button", "cancelBtnFn": () => { // Add your custom code to run when clicking the cancel button }, "okBtnLabel": "OK Button", "okBtnFn": () => { // Add your custom code to run when clicking the OK button } });If you don’t include the “cancelBtnFn”, the Cancel button is not shown. The OK button will always show (unless you set “showFooter”: false) and will by default close the dialog.
New in v1.0.32.0 is that the dffs_showModal returns the ID of the modal – which can be used to programatically close the modal like this:
dffs_hideModal(modalId);
Attach a custom onchange to a text field
To attach a custom onchange you must have the ID of the field placeholder – you find this by openinghte field property panel for the field in edit mode. Plase note that if you use the same field in your NewForm and your EditForm (or you use the same field in multiple tabs in the same form, this ID will be different. In that case you can use the other selector show below.
// This will format an US 10 digit phone number in a field with internal name PhoneNumber // This example requires that you toggle the Load jQuery option above the Custom JS textarea to ON jQuery("#7663586659705095_PhoneNumber input").on("change", function () { var s = getFieldValue("Title"); s = s.replace(/[^\d]/g, ''); if (s.length !== 10) { alert("Phone Number must be 10 digits") } else s = s.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3"); setFieldValue("Title", s); });Alternatively you can use this selector in the first line
jQuery("div[data-fin='Title'] input").on(...Toggle readonly on a field
Toggling readonly can be easily done in rules, but if you want to do it using custom js you can do it like this:
// Set as readonly dffs_doReadonly(["Status", "Title", "AssignedTo"]); // Undo readonly dffs_undoReadonly(["Status", "Title", "AssignedTo"]);
Toggle the visiblity on individual options in a choice field
dffs_choice_option_hidden["31838417512562245_DropdownChoice"] = { "Enter Choice #1": true, "Enter Choice #3": true };The id (31838417512562245_DropdownChoice) for your field can be found in the field property panel. Add the label of the options you want to hide and set the value to true. Reversing the action and make them visible again by setting the value as false. You only have to address the options you want to hide or show.
Detect change in a field
Use this in for example dffs_PreSaveAction to detect change in the title field:
if(dffs_beforeProperties["Title"] !== getFieldValue("Title")){ alert("Title has changed!"); }Post any question below.
Best regards,
Alexander -
Hi Alexander,
I’m just getting to play around with this and I think you might have missed some of your instructions. You mention setting something as read only but then your code is for hiding a choice.
Anyway, I’m trying the hide option and I can’t get it to work. I wrapped it in a ready function that I know works. I tried adding # to the beginning of the field reference also.
Here’s what I’m using:
jQuery(document).ready(function($) {
dffs_choice_option_hidden[“8506407795472748_DropdownField”] = {“Enter Choice #3”: true };
});I’m on version 0.9.0.14. Thanks.
-
-
-
-
Oh, I assumed it was possible because in the rule it shows:
RuleID (for use in Custom JS)
I am trying to show or hide an element based on the value in a field. For some reason the rule does not apply when the form loads–just when the field is manually updated afterwards. We do have it set to trigger on “Form load and change of conditions for triggering this rule,” but it seems to only trigger on the change of conditions part. Our condition is just if a particular field is “Yes” and the “If yes” part uses the “Show elements” action while the “If no” part uses the “Hide elements” action. It works if the field is manually updated, but it doesn’t seem to run the rule when the form opens.
My thought was to run the rule on a button click that is part of the form navigation anyway. I will see if I can come up with another way to make sure the rule applies like I want it to.
If I do resort to an action in the button click, is there a built-in action to hide an element from Custom JS?
-
I see, the id can only be used to check the status of a rule in your custom js – like this:
if(dffs_ruleState['030030010565992526']){ // The rule is true - do something }Are you sure you have checked correct option under “Trigger this rule on”?
If you have, please give me some details on the field type and any other things I need to replicate the issue.
Alexander
-
-
It is just a normal choice field with “No” and “Yes” options. There may be more to this on our side. I am picking up where another user created the beginning of the form. I will do some more research into this and report back whether or not there is something that requires your assistance. Thanks for your willingness to help.
-
It turns out the issue was a rule/form configuration mismatch. The rule which was supposed to trigger on form load included hiding many fields, but the fields had been deleted from the form itself where the rule was being applied. This did not trigger any errors, and I never could get any output in the console even with debugging on, which seems strange still. However, I was able to rebuild the form and only hide fields which were actually present. With this configuration, the rule triggers and outputs to the console as expected.
So my conclusion is, it seems if the rule which triggers on form load is referencing fields that do not actually exist in the form (even though they exist in the list), the rule may break or otherwise not run–even though the trigger conditions are met (but I never got any error messages to prove this theory).
-
Sorry, but I’m not able to recreate this issue. If you are able to give me a step-by-step guide to recreate it I’ll do my best to fix it though.
In my testing I found another bug where if you deleted a field used in a show/hide action in a rule, selecting the rules tab in the configuration would crash the configurator – I’ll get this one fixed in the next release.
Alexander
-
There must have been something unusual going on, but I don’t know what. I tried reproducing it, but I couldn’t do it with a simple clean list. Not sure exactly what was happening, but I did get it resolved by overwriting the form with an export from a mirror list. Sorry about the false alarm and inability to reproduce the issue! Thanks for your help.
-
-
-
-
Hi,
You can use this example to create a collapsible HTML section: https://www.w3schools.com/howto/howto_js_collapsible.aspThe email preview is a good idea – I’ll add it to the wish list for a future version.
Alexander
-
- You must be logged in to reply to this topic.