Expose isNewId functionality in conditional rendering

  • 2
  • Question
  • Updated 4 years ago
  • Answered
Conditional rendering is great and enables many features that would otherwise require multiple pages of essentially the same thing.

One thing that we find is that "new" and "edit" pages behave almost the same except for some small differences.  Unfortunately, there is no way currently in the available conditional rendering to render based on whether or not the record is new or not new because the model will always contain a row when the model property is set to "create default row when model has none"

There are workarounds to this, none of which are really ideal:

1) Check CreatedDate == null
2) Create a fake model and set a condition for a fake field to the value of a url parameter (e.g. id) and then use this value in conditional rendering
3) Jquery/javascript to call skuid.model.isNewId and then css to hide/show appropriate sections

Being able to identify in a conditional rendering criteria if the record is new or existing would greatly simplify the solution.

Thanks!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,106 Points 10k badge 2x thumb

Posted 5 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,026 Points 20k badge 2x thumb
Barry there may be another way of working around this.  Though the "new record" models do prepopulate an ID field,  they do not prepopulate any of the other required / read only fields.  You might get the outcome you are looking for if you put your conditional rendering in place on whether one of those fields is blank.  If "Created date" is blank you can pretty safely assume that it is a new record and render as a "new record" page. 

Let us know if this works for you. 

Cheers!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,106 Points 10k badge 2x thumb
Hey Rob -

Thanks for the reply.  The CreatedDate == null trick (option #1 from my original list) works and it's what we've been using in our pages.  Really where I was going with this is starting to provide some ideas about enhancements to Conditional Rendering (there are some posts already in the community and I have a few others queued up :)) that would provide substantial benefit.

In the case of new records, while this can be achieved today, providing a more explicit mechanism is really the thinking here.  It would make it more intuitive for skuid developers, especially for someone new to skuid, as well as providing a more reliable approach (understanding that CreatedDate should always be null for new records and theoretically that should never change in future releases).

Thanks!




Photo of Barry Schnell

Barry Schnell, Champion

  • 18,106 Points 10k badge 2x thumb
Hey Rob -


With the new Summer '14 release, the ability to conditionally clone a model is exposed and is extremely powerful. One of these benefits is that we can now develop pages that handle "New" and "Clone" as well as "View" and "Edit." In short, one page instead of multiple.


Unfortunately, one challenge that I'm facing to accomplish this without code is detecting a "new" record since on a Cloned model, CreatedDate has a value but the record is New.


Any thoughts on how to solve for this and also if you guys are planning on expanding the "conditional" rendering options to include IsNew and other types of capabilities (call a snippet, formulas, url param, field from another model, etc.) in a future release?


Thanks!
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,026 Points 20k badge 2x thumb
Barry - we'll give this some thought.  Nothing comes immediately to mind. Except for the snarky thought that you are trying to have your cake and eat it too.  But then,  so would I - so there.. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,106 Points 10k badge 2x thumb
Hey Rob -

Well I do like cake :) Thanks for the reply.

Some food (pun intended) for thought...Without the ability to detect new records, it requires a 2nd skuid page that is essentially a mirror image with one difference - that it's built to always expect new records instead of conditionally expecting new records. Conditional rendering is an extremely powerful feature. One of its primary benefits is eliminating code that would otherwise be required and also eliminating the need for multiple pages to handle very similar yet slightly different functionality. Given that our pages are rather complex, maintaining and supporting multiple pages with the same configuration/code introduces risk and raises costs. Having a method for at least determining whether a record is new would be a great addition to Skuid and lower support/maintenance costs and risk for customers. I'll agree that having things like formulas, calling snippets, checking other models is trying to get to eat the cake too but IsNew seems like a fairly common use case for conditional rendering within a component. Appreciate you guys considering adding IsNew and possibly some of the other capabilities in to conditional rendering. I know expanding the component centric conditional rendering capabilities has been talked about on several threads in the community - I'll provide the cake, you guys provide the features and then everyone can join the party :)

Thanks!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,106 Points 10k badge 2x thumb
Hey Rob -

I spent a little more time on this and think I have a viable solution. Admittedly it's not the most elegant but unless you feel otherwise, it should achieve the desired result without any consequences to other underlying structures, etc.

In short, I've created a snippet that detects whether or not a row is new and also if the page is in a "clone" mode. If yes, the snippet removes the CreatedDate and CreatedById from the row and then re-renders the component. The snippet is called via an inline snippet in the skuid ready function.

The downside is that this solution requires code and also intimate knowledge of which components have conditional rendering. That said, it appears to work as we need it to (further testing and validation is still pending on my end :)). Here's the snippet:

if (skuid.model.isNewId(accountRow.Id) &&
skuid.page.params.id &&
skuid.page.params.clone) {

var updateFields = {
,CreatedDate: null
, CreatedById: null
};

accountModel.updateRow(accountRow, updateFields);
skuid.component.getById('accountfieldeditor').render();
}

A couple of questions:
1) Any feedback on approach approach? Potential improvements?
2) When updateRow is called, the CreatedDate & CreatedById fields do not automatically update in the Field Editor however if I update a field like "Description" it does automatically update. Any reason why CreatedDate & CreatedById do not automatically sync with the field editor that displays those fields? The fact that it does not forces an explicit call to component.render().
3) As I understand it, cloned records are created on the client. I first attempted to set a model action using the new action framework (have I mentioned how awesome the action framework is?) for new row created and then call the above snippet from that action. Unfortunately, it does not appear that the new row created fires when the initial data is loaded in to the model. I also tried to trap for the event row.created but that too did not fire. I'm assuming this is by design? Assuming yes, thoughts on having these events fires even on initial load in a future release?

A few further thoughts on expanding conditional rendering functionality:
1) For "IsNewId" capability, my thought is you could consider adding this as an operator on conditional rendering. There is already logic that exists for the available operator choices so the "isNewId" operator could only be displayed if the field selected is an Id field. This approach would allow you to provide isNewId capability using the existing structure of conditional rendering and would avoid all the code from above.

2) Since I really do love cake, taking the above one step further and as an initial feature, another operator could be added that would call a snippet. This of course, does come with some risks as customers could get pretty crazy in a snippet and since this impacts UI rendering performance, this could lead to negative consequences. That said, by offering a "call snippet" operator, customers (at their own risk of course and understanding the ramifications) could do anything they want and then just return true/false from the snippet for skuid to evaluate during analysis of conditions. Having a "call snippet" operator would allow for things like computed value analysis, checking other models or even custom rolling the isNewId by just calling skuid.model.isNewId(row.id). Possibilities would be endless :)

Thanks!