Button Enable when Snippet Returns True

  • 1
  • Problem
  • Updated 1 year ago
  • Solved
I can not get the enabling based on Snippet Returning True to work.

I've simplified my snippet down to this:

var enableCheck = true;           
console.log('check result ' + enableCheck);
return enableCheck;

Console returns a true but the button does not enable.

Any hints on how to get this to work?

I've tried returning true and "true" and neither are working.




Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Peter Kong

Peter Kong, Employee

  • 440 Points 250 badge 2x thumb
Hi Chandra, thanks for posting - I just tested your code in a In-Line (Snippet) type Snippet on a Page Title Button, and it's working for me!

Before we step in deeper, I'd like to double check the following:

1) What version of Skuid are you on?
2) Is the Snippet of In-Line (Snippet) type?
3) Have you already done a full refresh of the Skuid preview Page (reloading the cache)? 
4) Is the "Enable Conditions" section of Button Properties set to "ALL Conditions are met"?

Thanks,
Peter
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Hi Peter, thanks for the response.

1) I am on Skuid 8.15.9
2) Yes, it is an In-Line (snippet) type.  To trigger the snippet to run, I have a model action that looks for my field "Description" to be updated and then it runs the snippet.  It appears as though the snippet is running based on me seeing the "check results true" in the console window.
3) I just cleared my cache and tried again - still didn't work.  (Chrome)
4) Yes, enabling conditions are set to ALL must be true, and the snippet is the only condition for enabling.


For fun, I tried a few more things:
1) Tried in Firefox.  Console returned "check result true" but the button did not enable
2) Put a new page title and button, called My New Button on the page and used the exact same rendering condition.  On page load, this button was enabled but the original Save button still was not.  They both are using the same snippet.  Weird.


It appears as thought I don't fully understand the behavior as well.  I am using the enable snippet to check to make sure required fields are not null before the user can attempt to save.  Because this create page is used for a couple "types" of records, the fields that required depends on the type.

For example, if you create new record of Type A, then you must fill out 'Description' and 'Length'.
If you create a new record of Type B, then you must fill out 'Description' and 'Weight.'

That is why I am using a snippet, to conditionally check the fields required based on the Type that the user has specified.  Yes, we use required fields (red boxes) but sometimes they miss those fields, so we want the button disabled until they have satisfied the requirements, rather than get a messy error message.

So in my case, I had the Snippet Evaluates to True checking the fields.  I had a model action set to run the snippet when these fields were updated on the row (so when the user updates Description, run the snippet to see if the conditions were now satisfied.  If true, then then button should enable.)

With the "My New Button" case above, the button was enabled on page load - using the simple "return True" snippet.  I didn't expect this, because I didn't think the In-Line (snippet) would run on page load, I thought I would need to trigger it.  I just want to make sure I understand how the enable snippets work, and what the event is that makes the snippet evaulate the conditions.

My full snippet is below. I commented out all the logic and just entered the simple return true for my testing - but still don't even have that working on my save button.

var params = arguments[0], $ = skuid.$;

/*
var NcmirModel = skuid.model.getModel('AFLCase');
var NcmirRow = NcmirModel.getFirstRow();

var type = NcmirModel.getFieldValue(NcmirRow, 'Type__c');
var issueProcess = NcmirModel.getFieldValue(NcmirRow, 'Issuing_Department__c');
var issueMachine = NcmirModel.getFieldValue(NcmirRow, 'Issuing_Machine__c');
var defectCat = NcmirModel.getFieldValue(NcmirRow, 'Defect_Category__c');
var defectDetail = NcmirModel.getFieldValue(NcmirRow, 'Defect_Detail__c');
var currentLength = NcmirModel.getFieldValue(NcmirRow, 'Current_Cable_Length__c');
var transactMRB = NcmirModel.getFieldValue(NcmirRow, 'Transacted_to_MRB__c');
var description = NcmirModel.getFieldValue(NcmirRow, 'Description__c');

// Check Discrete Job required fields
var enableCheck = false;

if (type == 'Discrete Job'){
    alert('discrete job');
    if (
        (issueProcess !== "") &&
        (issueMachine !== "") &&
        (defectCat !== "") &&
        (currentLength !== "") &&
        (description !== "")
        ){
            enableCheck = true;
            console.log('check result ' + enableCheck);
        }
       // else {
            //enableCheck =  false;
       // }
}

return enableCheck;

*/
var enableCheck = true;
            console.log('check result ' + enableCheck);
return enableCheck;
Photo of Peter Kong

Peter Kong, Employee

  • 440 Points 250 badge 2x thumb
Hi Chandra,

Try deleting the button in question and then recreating it. If my research is correct, I think this should actually work! 
From what I've found so far, the XML's a little bit corrupted from a edge-case bug. 

- Peter
(Edited)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
I already tried that - with the My New Button case.  I tried it again - still doesn't work.  Console returns true, but the button does not enable.

Photo of Peter Kong

Peter Kong, Employee

  • 440 Points 250 badge 2x thumb
There appears to be multiple things happening here - 

1. The Save button's XML is still corrupted (as of checking it now) - it will not work even if checkRendered is returning true (initial commented version) on the initial Page Load in its current state. 

2. My New Button not enabling is a separate issue - now that we've uncommented the checkRendering Snippet's code, it does not default to true. I notice that the console log is being fired by the AFLCase Model Action, so the your logic is going through.

However, the issue is that the Page Title Component itself only checks the Snippet:
  • 1. Once during instantiation
  • 2. When its associated model updates - if it's cancelled, a new row is created, model is queried etc. 

That said, the Page Title is NOT checking when a new row is edited, which is what's happening to us here.

As an example, type this into the runtime Chrome console during runtime and only after filling in the required fields:
skuid.$C('sk-1CeTSX-556').render();
This should enable My New Button.

Essentially, what needs to happen is that every time checkRendered triggers in AFLCase, you'd have to re-render the Page Title Component with Javascript using a method similar to the example I gave above.

Let me know if you have any questions!
(Edited)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
OK - so I got this working,  Created a new snippet that is only 'skuid.$C('pageTitleID').render();

Called that snippet on the model action "row is updated", specifically the required fields I am looking for.  

I was missing that the snippet on the button enable is evaluated whenever the page title is rendered, not by calling the snippet.

Thanks for the help.
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
I have a new problem.  This is a create page used both to create a brand new record, and also to create a record that is basically cloned from an existing one.  So sometimes the url passes a parameter called "src" to another model, which is then used to set a bunch of default conditions.

What appears to be happening is the fields that I check for my button enabling are being set as the model is loading in my clone case.  When the fields are set as model conditions, it triggers the model action  to re-render the page title component that the enable button sits in.  The page title doesn't exist yet on the page, so I get an error: 

TypeError: Cannot read property 'render' of undefined

Is there a way I can make my snippet that has the  'skuid.$C('pageTitleID').render(); call only run if 'pageTitleID' exists on the page?

Like some sort of condition in the snippet... that checks if the pageTitleID exists yet (or is registered)?
Photo of Dinesh Ramanadham

Dinesh Ramanadham

  • 372 Points 250 badge 2x thumb
Peter KongChandra V - 
I am also facing the same issue, if I put wrapper id in place of page Title ID in skuid.$C('pageTitleID').render(); will that work?

Thanks,
Dinesh