Idea: reference field on click options

  • 5
  • Idea
  • Updated 4 months ago
Each reference field in field rendered or tables or decks could have five on-click options:
1) open in current window
2) open in new window
3) open in popup
4) open in sliding panel
5) do nothing
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 1 year ago

  • 5
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Raymond,

Up vote here.  Especially the 'do nothing' option.

Thanks,

Bill
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Similar concept with email fields and hyperlink fields would be nice. 
Open in current window
Open in blank window
Open in Javascript popup
Open as mailto
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
Raymond and Bill,

Did you guys know that you can control where a reference field links to as of the Brooklyn Q2 release? You can click on a reference field and view the Link tab and decide if it links to the data source default, no link, or custom url (and within custom url you can decide if it opens in a new tab or the current window). You might have made this post because you wanted to extend that functionality, but I wanted to let you know about it just in case (I didn't notice it as a new feature until just the other day!) :)
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Amy,

Thanks for letting us know.  I know that I did not know of this feature until your post.  I am not sure about Raymond.

Thanks again!

Bill
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
Hi Amy, 

I am using the "Custom URL" and "Open in new tab" options for this, which is great. I however ran into the issue that I would like to pass on a page parameter in my custom URL, and the ampersand (&) gets rewritten to "&", breaking my link to the Skuid page :-(  Any way around this?

Many thanks in advance, 

Robin
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
Is anybody able to get around the ampersands getting recoded to "&", breaking the links?
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Robin,

Try wrapping your URL with the 'urlDecode' merge.  Like this....

{{#urlDecode}}/apex/skuid__ui?page=AccountDetailTest&id={{{AccountId}}}{{/urlDecode}}

Thanks,

Bill
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
Bill delivers the goods yet again. Simple and flawless solution, all of my thumbs up!

Much appreciated, 

Robin
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
From Amy Dewaal: Did you guys know that you can control where a reference field links to as of the Brooklyn Q2 release? You can click on a reference field and view the Link tab and decide if it links to the data source default, no link, or custom url (and within custom url you can decide if it opens in a new tab or the current window). You might have made this post because you wanted to extend that functionality, but I wanted to let you know about it just in case (I didn't notice it as a new feature until just the other day!) :)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Another option is to have inline js to make all ref fields open in a new tab by default. It's otherwise a pain to find each iteration and set this way. I like copy/paste better. ;)

(function(skuid){
    var $ = skuid.$;
    
    // curry tastes good and is good for you too
    var curry = function( func ) {
        // the first parameter to this function is the function we are going to call
        // so we strip it off to get the remaining parameters
        var args = Array.prototype.slice.call(arguments, 1);
        
        // curry returns a function itself
        return function() {
            // when the function that was returned is called, we merge any parameters
            // that were passed originally to curry (minus the first param which was the function
            // itself) with any parameters that are being passed to this function
            // this allows us to support skuid adding parameters in the future and it
            // not impacting our renderer wrapper - Told you curry was good :)
            return func.apply(this, args.concat(Array.prototype.slice.call(arguments)));
        };
    }; 
    
    // get shorthand to the stock skuid field renderers
    var fieldRenderers = skuid.ui.fieldRenderers,
        REFERENCE = fieldRenderers.REFERENCE,
        originalRef = {
            read: REFERENCE.read
            , readonly: REFERENCE.readonly
            , edit: REFERENCE.edit
        };
    

    var refRenderer = function(mode, field, value) {
        // mode is in arguments[0] - we're using the named parameter
        // field is in arguments[1] - we're using the named parameter
        // value is in arguments[2] - we're using the named parameter
        // in this case, we aren't following the curry principles entirely
        // if we were we would pass the full paramater chain to the calling function
        // but we're using curry to insert a first param and allow the remaining
        // parameters to by dynamic.  So, to make skuid think we didn't do anything
        // we need to strip back off our first param and pass the remaining
        // parameters to the original renderer            
        var origArgs = Array.prototype.slice.call(arguments, 1);
        
        // invoke the original renderer        
        originalRef[mode].apply(this, origArgs);
        
        $('a',field.element).attr("target", "_blank");
        
    };
    
    // our wrapper renderer that contains the logic for which renderer to actually invoke
    // this allows the specific renderers themselves to be single purposed
    var customRefRenderer = function(mode, field, value) {
            refRenderer.apply(this, arguments);
    };
    
    // we need way within the renderer to know which mode we should use
    // we can't rely on field.mode because underneath, skuid directly invokes
    // READ from READONLY.  However, since we have replaced the originals, we
    // end up in a recursive loop calling back in to READONLY on the original
    // because field.mode is READONLY.  Sine we made some curry we'll add
    // a little custom renderer wrapper sauce to it and mmmmm, yummy!
    REFERENCE.read = curry(customRefRenderer, 'read');
    REFERENCE.readonly = curry(customRefRenderer, 'readonly');
    REFERENCE.edit = curry(customRefRenderer, 'edit');	
})(skuid);