Search Results for 'list form'

[Brian Oster]

I have several lists that have a lookup column to another list (basic SP functionality). When a user views one of these lists and clicks the default hyperlink for the lookup column it opens the lookup column list item in a Modal Dialog. I would like for the linked list item to open in a full window or even a new window/tab instead.

I am looking for a native SharePoint Online way to do this but I am not having success.

All the lists, including the list linked too, are using DFFS forms so if I can’t find a native SPO way to do it, I was wondering if in the DFFS form if I could detect that the windows is a modal dialog and redirect to a full window, or maybe just display a button/icon for the user on the form when modal dialog to optionally switch out of the modal dialog to a full window.

[Alexander Bautz]

Thank you for the feedback. I’ll add your points to the list and work through them and see what I can implement in the next update.

Regarding the buttons in the top row of the editor: you must drag-and-drop them to the place in your form where you want to add them.

You can style the label individually for each field if you open the field properties (right click or select from hamburger-menu ☰).

Best regards,
Alexander

[Alexander Bautz]

Hi,
Are you sure you don’t load the attachSPJSChartsSelectHandler call two times?

If you are, you can try adding this code to ensure it doesn’t run twice:

var chart_attachedEvents = {};
attachSPJSChartsSelectHandler("Put the chart ID here");
function attachSPJSChartsSelectHandler(id) {
    if(chart_attachedEvents[id]) return; // Ensure it does not attache twice
    try {
        google.visualization.events.addListener(spjs.charts.data.charts[id], 'select', function (e) {
            chart_attachedEvents[id] = true;
            var selection = spjs.charts.data.charts[id].getSelection();
            var data = spjs.charts.data.chartData[id];
            var message = '';
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = data.getFormattedValue(item.row, item.column);
                    message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
                } else if (item.row != null) {
                    var str = data.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                } else if (item.column != null) {
                    var str = data.getFormattedValue(0, item.column);
                    message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                }
            }
            if (message == '') {
                message = 'nothing';
            }
            alert('You selected ' + message);
        });
    } catch (ignore) {
        setTimeout(function () {
            attachSPJSChartsSelectHandler(id);
        }, 1000);
    }
}

Look at line 1, 4 and 8.

Alexander

[Ian Patrick]

Hi Alex,
I’m using the attachSPJSChartsSelectHandler event handler as prescribed in user manual. When I have 1 chart on the page the event triggers correctly. When I put a second chart on the page and click on the chart with the event handler attached the event triggers twice! (In my case because I launch a new tab it opens two tabs in the browser. Is this a known issue and is there any way around it?
Secondly, can I attach a different events to two (or more) charts on the same page?

Kind regards
Ian
This is my modified code:
attachSPJSChartsSelectHandler(“Delivery”);

function attachSPJSChartsSelectHandler(id){
try{
google.visualization.events.addListener(spjs.charts.data.charts[id], ‘select’, function(e){
var selection = spjs.charts.data.charts[id].getSelection();
var data = spjs.charts.data.chartData[id];
var message = ”;
var _date=”;
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
_date=data.cache[item.row][0].Me;
var str = data.getFormattedValue(item.row, item.column);
message += ‘{row:’ + item.row + ‘,column:’ + item.column + ‘} = ‘ + str + ‘\n’;
} else if (item.row != null) {
var str = data.getFormattedValue(item.row, 0);
message += ‘{row:’ + item.row + ‘, column:none}; value (col 0) = ‘ + str + ‘\n’;
} else if (item.column != null) {
var str = data.getFormattedValue(0, item.column);
message += ‘{row:none, column:’ + item.column + ‘}; value (row 0) = ‘ + str + ‘\n’;
}
}
if (message == ”) {
message = ‘nothing’;
}
var _fdate=Date.parse(_date).toString(“yyyy-MM-dd”);
//Open a new window pass in date

//New window
window.open(‘https://MyCompany.sharepoint.com/sites/KPI/SitePages/KPIDetail.aspx?COL=’+_fdate,’_blank&#8217;);
//alert(‘You selected ‘ + message + ” : ” + _fdate);
});
}catch(ignore){
setTimeout(function(){
attachSPJSChartsSelectHandler(id);
},1000);
}
}

[SteveE]

Great work on the updates! Here’s some feedback:

– If I require a field using a rule and it isn’t present, if you try to save the list item, it won’t allow you. No error – just the save button does nothing. Maybe not a big deal, but something I noticed.

– LOVE the “continue editing” prompt. Saves me a lot of clicks.

– LOVE the redirect on the details icon in list view. However, if I click it to view the item, and then click “edit” the rules and custom JS do not load. You might want to look at how the rules are being enforced because if I require a field in View Form (which I know doesn’t work) and it’s not required in Edit Form, it shows as a required field but won’t let me save.

– Additionally, if I just regular click and item to view it and then click “edit” the rules do load but custom JS does not. This is my “ready” js that doesn’t load so it could be that I need to call it differently.

– Here’s another weird one. If in in Edit Form config and switching to View Form config it brings over the custom JS. Also say I have “Show Version History button” toggled on. Then I go to Edit form config and then use the switch to View form config, it loses the toggle being on. However, it didn’t really lose it because if I go directly to change the view form config from the DFFS button, the toggle stays on and the custom JS isn’t brought over like it seemed to be.

That’s all for the moment. I’ll keep testing if I have time.

[SteveE]

I’m confused. If you want to restrict access to a list or form, why not break the permissions and give access to that specific group using the native SharePoint option under list options/permissions and remove the other groups?

Or if there is some reason to not do that, have you tried using the tab options to give access instead of rules? Not sure how you are trying to set up the rule, but I’d probably go with one of the other options first.

• This reply was modified 2 years, 7 months ago by SteveE.

[Andra Mitchell]

I have an open access SharePoint site. I created a custom form that only a select group of users can fill out. To restrict access, I created a new user group. Using rules I selected the option SharePoint group membership: Logged in user is a member of group. Under This value, I added the membership group ID. I also tried using the group name. During testing, the users are able to select the link and fill out the form. Note I also tried selecting Logged in user is NOT a member.
Is it possible to restrict access on a form on an open access site? I’ll also add we also have another group that responds to another form/list and that works successfully.
Thanks,
Andra

[Alexander Bautz]

To use all these examples you must have v1.0.12.0 or later

---

Updated April 29, 2025: Added required vLookup example and added the goToEditForm parameter in the dffs_PreSaveAction example.

Updated February 04, 2024: Added dffs_vLookup_callback example

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(exit, autosave, goToEditForm) {
  if (exit) { // Code only runs when you use SaveAndExit (new in v1.0.46.0)
    // 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;
  } else {
    if (autosave) {
      console.log("AutSaving");
    } else {
      console.log("QuickSaving");
    }
  }
}

Save the item from Custom JS

Call this function from Custom JS to save the form:

dffs_triggerSave(true); // Save and exit
dffs_triggerSave(false); // Quick save

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);

Trigger custom code when a field is changed

Use a function like this to run custom code when a field is changed.

function dffs_fieldChanged(fin, new_value, previous_value) {
  console.log("The field " + fin + " was changed from");
  console.log(previous_value);
  console.log("to");
  console.log(new_value);
}

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

The code example was changed because of a change in v1.0.46.0

dffs_choice_option_hidden = {"DropdownChoice_31838417512562245": { "Enter Choice #1": true, "Enter Choice #3": true }};

The id (DropdownChoice_31838417512562245) 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!");
  }

Add a callback when a vLookup has loaded

You can use this method to run your own custom code when a vLookup has loaded. You can find the id of the vLooup in the vLookup configurator.

function dffs_vLookup_callback(id, items){
  if(id === "vLookup_7943515991751215"){
    console.log(id, items);
  }
}

Set a vLookup as required using Custom JS

This example adds a red border around the vLookup table and stops the save if the vLookup doesn’t have any items. You must edit the vlookup config and find the id of your instance and replace vLookup_19846478236782328 in the code snippet below.

// This variable is set to true if the vLookup has any items and is used in the dffs_PreSaveAction function.
let has_vLookup_items = false;

function dffs_vLookup_callback(id, items) {
  if (id === "vLookup_19846478236782328") {
    if (items.length > 0) {
      has_vLookup_items = true;
    }
  }
}

function dffs_PreSaveAction(exit, autoasave, goToEditForm) {
  if (exit) { // Only run when save and exit
    if (!has_vLookup_items) {
      document.querySelector("#vLookup_19846478236782328").style.border = "3px red solid";
      return false;
    }
  }
}

Flag, clear or check mandatory fields from Custom JS

These functions requires v1.0.65.0 or above.

// Flag fields as required
dffs_flagMandatory(["Field_1", "Field_2"]);
// Clear the required flag from fields
dffs_clearMandatory(["Field_1", "Field_2"]);
// Check if all mandatory fields have been filled in.
let allFieldsFilledIn = dffs_checkMandatory(false); // Shows required fields banner to alert the user of any enpty required fields
let allFieldsFilledIn = dffs_checkMandatory(true); // Do not show any message to the user

Please note that flagging a field that is not in the form has no effect.

Set date field when adding new item from a calendar view

To automatically set the start date on the list item when clicking in the calendar to create a new item, you must use this snippet of Custom JS in your NewForm (replace DueDate with your actual date field internal name):

if(sessionStorage.getItem("__dffs_NewCalendarItemDate") !== null){
  setFieldValue("DueDate", new Date(sessionStorage.getItem("__dffs_NewCalendarItemDate")));
}

Set bucket-identifier when adding new items in a board-style list view

To automatically set the bucket id (choice field) on the list item when clicking the add new button at the top of a bucket, you must use this snippet of Custom JS in your NewForm (replace Category with your actual choice field internal name):

if(sessionStorage.getItem("__dffs_BoardViewBucketId") !== null){
  setFieldValue("Category", sessionStorage.getItem("__dffs_BoardViewBucketId"));
}

Post any question below.

Best regards,
Alexander

• This topic was modified 2 years, 7 months ago by Alexander Bautz.
• This topic was modified 2 years, 2 months ago by Alexander Bautz. Reason: Added more examples
• This topic was modified 1 year, 8 months ago by Alexander Bautz.
• This topic was modified 1 year, 8 months ago by Alexander Bautz.
• This topic was modified 1 year, 6 months ago by Alexander Bautz. Reason: Added more examples
• This topic was modified 1 year, 4 months ago by Alexander Bautz.
• This topic was modified 1 year, 4 months ago by Alexander Bautz.
• This topic was modified 1 year, 4 months ago by Alexander Bautz.
• This topic was modified 1 year, 4 months ago by Alexander Bautz.
• This topic was modified 1 year, 3 months ago by Alexander Bautz. Reason: Added dffs_vLookup_callback example
• This topic was modified 9 months, 2 weeks ago by Alexander Bautz.
• This topic was modified 4 months ago by Alexander Bautz. Reason: Added information about setting startdate from calendar
• This topic was modified 4 months ago by Alexander Bautz. Reason: Added information about setting bucket-identifier
• This topic was modified 2 weeks, 4 days ago by Alexander Bautz.

[Alexander Bautz]

Known bug in this version:
When clicking the New button in a list view, the form sometimes open two times (two panels – one on top of the other) – this causes some issues with for example checkboxes not responding.

Alexander

[Alexander Bautz]

Another round of updates based on your feedback. Some new functionality has been added and I have fixed a few bugs in the overriding of the buttons and menus in the list view to ensure the modern DFFS form is opened and not the out-of-the-box SharePoint form.

I’ll post some examples on Custom JS for this new version later this week.

Most Custom JS created for the classic DFFS will unfortunately not work, but setFieldValue and getFieldValue will. Use it like this:

// Set the Title field
setFieldValue("Title", "The title field value");
// Set a date field 14 days ahead of today
let date = new Date();
date.setDate(date.getDate() + 14);
setFieldValue("DateAndTime", date);

Please post any feedback below or email me if you cannot post in the forum.

Alexander

[Alexander Bautz]

Thanks again for the feedback.

I have tinkered a bit with it during the weekend and have replicated the error with [[currentuser:email]] – I’ll get that fixed.

I have also made some changes to the code used to override the buttons / links to New, Disp and Edit in a list view to hopefully get them to always override the default form. The problem here is that Microsoft doesn’t (as far as I know) provide any override method to use a custom form so I’m trying with code to override them.

I’ll get the comment and details pane edit disabled and I’ll try to get some examples on how you can use custom code also in the next version.

Alexander

[SteveE]

There are a lot of great updates in this version. It seems a lot more stable overall. Here are a few things:

When using the current user in an email rule I get the error “Email is not a valid recepient.” What populates is [[currentuser:email]]. I still can’t the email to trigger when entering a full email address (but don’t get an error), but as I told you, it may be specific to my environment.

How do I identify the fields to call in jQuery? I looked in the dev console and tried different options with no luck. I know you were talking about some examples at some point which will be helpful. I was able to get an alert to pop-up using javascript. Thanks for the jQuery load option!

In list view, if I click an item there’s an option to click “Comment”. It opens a panel where I can edit anything without dffs loading. I even have “Allow comments on list items?” set to no. There might be options on a site level to remove this, but you might want to consider hiding this option in the ribbon if possible. I can also choose “Edit” in the ribbon if I select an item and the dffs form doesn’t load. Same with version history in the ribbon.

Along the same lines, the details panel has returned with full edit ability.

Find a field in rules or formbuilder would be helpful. I use this pretty often in the old version.

I still think a “Close configuration” or something would be helpful upon saving. Thanks for the warning when flipping forms!

I tested many of the rules options and they all seem to be functioning properly.

Thanks for the great work!

[Alexander Bautz]

Thanks for the feedback – I’ll change the font colors on the headers.

Not sure about the need to change to powerapps (as DFFS is not using powerapps), but it might be that you have the classic DFFS installed in the same list? – if you do, SharePoint will auto-detect that the form is modified and try to load the classic NewForm / DispForm / EditForm.

Alexander

[Sanchez]

Hi Alexander, I currently have a ‘Save & Copy to New Form Entry’ button and working perfectly; however, the team also needs to create a ‘Copy to New Form Entry’ from a DispForm or EditForm. I wasn’t able to figure out how to add the button from DispForm since there is a Save

I couldn’t even get it started from DispForm at all. I started to from EditForm but it’s trying to copy to another EditForm instead of Copying to a NewForm

http://contoso.com/sites/xxx/xxx/Lists/xxx/EditForm.aspx?CreateCopy=1

if I changed the address line to …..NewForm.aspx?CreateCopy=1 then it’s perfect.

1 – What can I change below so it doesn’t require a Save to trigger the copy and start new entry?
2 – What can I change from the following code to have the CreateCopy=1 open as NewForm instead of EditForm?
3 – What can I change from the code below to add a button and trigger copy/start new form from Display?

// If creating a copy
if(GetUrlKeyValue(“CreateCopy”) === “1”){
var str = sessionStorage.getItem(“SaveAndCreateNewData”), data;
if(str !== null){
data = JSON.parse(str);
jQuery.each(data,function(fin,val){
setFieldValue(fin,val);
});
}
}
// Add button
jQuery(“input[id$=’_diidIOSaveItem’]”).after(“<input type=’button’ class=’ms-ButtonHeightWidth’ style=’margin-right:4px;’ value=’Copy & Start a New Entry’ onclick=’saveAndCopy()’ />”);
var createCopyWhenSaving = false;
function saveAndCopy(){
createCopyWhenSaving = true;
spjs.dffs.triggerSave();
}
function dffs_PreSaveAction(){
if(createCopyWhenSaving){
var arr = [
“FieldInternalNameA”,
“FieldInternalNameB”,
“FieldInternalNameC”
];
var data = {};
jQuery.each(arr,function(i,fin){
data[fin] = getFieldValue(fin);
});
sessionStorage.setItem(“SaveAndCreateNewData”,JSON.stringify(data));
// Redirect
spjs.dffs.redirect(location.pathname + “?CreateCopy=1”,false);
}
return true;
}

[Travis Goodman]

Hi Alexander, I’m behind on my testing. Always something that pops up. Here’s my status and thoughts so far:

Got the modern forms package added and installed. Note, I ran into this, so you’ll want to add it to your instructions, if you have classic DFFS installed, you need to go to your DFFS Installer page and have it uninstall classic DFFS from the list you want to use modern on.

The user interface in the limited time I’ve gotten to mess with it is fantastic. I am loving the grid system for responsiveness, and if you recall my assistance with the classic DFFS responsive code, this is always what I was trying to accomplish.

One thing I will suggest, you have the top bar frozen to the top which is great! I would recommend adding the “Preview form (rules are not evaluated) to that same frozen top. Right now on the Formbuilder tab, if I’m scrolled all the way at the bottom, I have to scroll all the way to the top to click that preview. Very minor, but a quality of life improvement in that regard.

Also, on formbuilder, loving the layout. Can it be configured so that as I’m building the form, I can collapse rows? That way if a row is set and I don’t want to mess with it and don’t need to see it, I can collapse it so that it doesn’t take up a ton of real estate?

For rules, I have not gotten this far yet to create my rules and test them. I’ll have some feedback for sure as I have some extremely complex rules in some lists I will try to replicate. I understand you won’t have full compatibility yet, and that’s totally understandable. One thing that stood out was that there’s no trigger that is for “on change” only. It’s either for “Form load” or “Form load AND form change”. Some things I want to trigger only on change.

I also saw in another comment that you are no longer doing auto-reversing of rules. I am actually ok with this, but I will have to un-learn it lol. I’m so used to it over the years, and it took me a long time to get used to it, but it’s probably for the best. With the “If Yes/If No” sections, it shouldn’t be a problem for most people going forward to do their own “reversing”.