Discussions

Expand all | Collapse all

Magic Button Question - Changing Appearance after clicking

  • 1.  Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 10:54
    Hi All, 

    I have searched but can't seem to find this option. 

    I have already created a formula url button that runs a few actions (checks a box, notes the user that clicked it, and refreshes the page). 

    Is there a way to have the appearance of the button change whether it's been clicked or not (maybe using the checkbox I mentioned above)?

    Example: Before button displays as green and text "Click to Approve" and after clicked display as red and text "Approved". 

    The main issue I'm dealing with has to do with this button in reports. In the form view, I'm able to make it appear that it has changed by using two buttons and form rules, but this doesn't allow someone to know that the button on the record has already been clicked when clicking the button in report view. 

    Any ideas?

    Thank You!
    Chris


    ------------------------------
    Chris
    ------------------------------


  • 2.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 12:13
    You can do this with a Formula Rich text field,

    var text ToggleApproval  =
    URLRoot() & "db/" & Dbid() & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_28=" & not [checkbox];

    // note that you already have a formula URL field so you can just use this instead of the above line

    var text ToggleApproval = [my existing URL formula field];

    var text URL =
    "javascript:" &
    "$.get('" &
    $ToggleApproval &
    "',function(){" &
    "location.reload(true);" &
    "});"
    & "void(0);";

    If([checkbox]=true,

    "<a class=\"Vibrant Danger\"a href=" & $URL & ">" & "Click to reverse Approval" & "</a>",
    "<a class='Vibrant Success' style='border:1px solid #6BBD57; background-color:#6BBD57'" & "a href=" & $URL & ">Click to Approve</a>")

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 3.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 12:45
    Thank You, Mark! As always you're amazing!

    So would I'd be adding it into the formula button, right?

    Here's the current formula. Sorry I'm a little turned around on where to splice in the If statement.

    // edit the record: fid 109 to [Approved By] - Stamp application with approver name and date/time
    var text URLONE = URLRoot() & "db/" & Dbid()
    & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_236=" & URLEncode(UserToName(User()))
    & "&_fid_237=true"
    & "&apptoken=.....";

    //Display Current Record
    var text DisplayRecord=
    URLRoot() & "db/" & Dbid()
    & "?a=dr&rid=" & [Record ID#]
    & "&apptoken=.....";

    //String, Edit and Display Current Original Record

    $URLONE
    & "&rdr=" & URLEncode($DisplayRecord)

    ------------------------------
    Chris
    ------------------------------



  • 4.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 13:13
    OK, it is helpful to see your code

    Try this
    // edit the record: fid 109 to [Approved By] - Stamp application with approver name and date/time
    var text URLONE = URLRoot() & "db/" & Dbid()
    & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_236=" & URLEncode(UserToName(User()))
    & "&_fid_237=true"
    & "&apptoken=.....";


    var text URL =
    "javascript:" &
    "$.get('" &
    $URLONE &
    "',function(){" &
    "location.reload(true);" &
    "});"
    & "void(0);";

    If([checkbox]=true,

    "<a class='Vibrant Danger'>Approved</a>", 

    "<a class='Vibrant Success' style='border:1px solid #6BBD57; background-color:#6BBD57'" & "a href=" & $URL & ">Click to Approve</a>")

    You can also substitute 'Vibrant Primary' for 'Vibrant Danger' if you want the button to be blue instead of red when approved.   Or 'Vibrant Alert" for a yellow color.


    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 5.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 14:06
      |   view attached
    Thank You, Mark!

    I just plugged it in and the button itself isn't responding to the formatting. Could it be something to do with the field display settings? I'm playing around with them, but not finding anything that works. (Getting no button/only link or the button with the field settings color, etc.)

    Here's a screenshot of the field settings. 


    ------------------------------
    Chris
    ------------------------------



  • 6.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 14:08
    The field type will need to be Formula Rich Text and not Formula URL, if you want to control the button appearance.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 7.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 14:14
    <palm in face>...

    Thanks for catching my errors... always. 

    In your opinion - other than to avoid coding the button appearance, is there ever a reason to go Formula - URL vs. Formula - Rich Text?

    ------------------------------
    Chris
    ------------------------------



  • 8.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 14:20
    A formula URL button is always simpler to code as the button is fixed color and fixed text. 

    So typically a formula URL button will either appear or not appear based on either form rules or a formula in the button itself which will calculate to null if it is not meant to be pushed at that point, for example If the record is already approved, then typically you want the button to be blank. 

    Also I have found that when there needs to be nested URL AOPI calls to do a series of steps, they tend not to work in n a formula Rich Text field whereas they always work in a formula URL.

    The other way to make the button images is to use the free website dabuttonfactory.com

    Then you get any color/size button, any color/size text and you get to control other appearance features of the button.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 9.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 14:37
    That makes total sense! Thanks so much for the amazing help!

    Final question (only if you can spare the time) -

    I have a button that's almost the exact same, but with an added step that adds a record/copies fields to another table. 

    From what it looks like, I would keep the var = formula the same for the add record/copy fields step. If that's correct, how would I go about inserting this additional step into the string?

    --------------

    var text URLONE=
    URLRoot() & "db/" & Dbid()
    & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_183=" & URLEncode(UserToName(User()))
    & "&_fid_233=true"
    & "&apptoken=......";

    var text AddRecord=
    URLRoot() & "db/" & [_DBID_TRANSACTIONS]
    & "?act=API_AddRecord"
    & "&apptoken=....."
    & "&_fid_6=" & [Application/Offer Confirmation Date]
    & "&_fid_44=" & ([Deal %]*100)
    ...........
    & "&_fid_45=" & Round([Payment],0.01);

    var text URL =
    "javascript:" &
    "$.get('" &
    $URLONE &
    "',function(){" &
    "location.reload(true);" &
    "});"
    & "void(0);";

    If([Invoiced Confirmation]=true,

    "<a class='Vibrant Danger'>Approved</a>",

    "<a class='Vibrant Primary' style='border:1px solid #6BBD57; background-color:#6BBD57'" & "a href=" & $URL & ">Click to Approve</a>")

    -------------

    ------------------------------
    Chris
    ------------------------------



  • 10.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 14:44
    Lets try thius

    var text URLONE=
    URLRoot() & "db/" & Dbid()
    & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_183=" & URLEncode(UserToName(User()))
    & "&_fid_233=true"
    & "&apptoken=......";

    var text AddRecord=
    URLRoot() & "db/" & [_DBID_TRANSACTIONS]
    & "?act=API_AddRecord"
    & "&apptoken=....."
    & "&_fid_6=" & [Application/Offer Confirmation Date]
    & "&_fid_44=" & ([Deal %]*100)
    ...........
    & "&_fid_45=" & Round([Payment],0.01);

    var text CheckAndAdd = 
    $URLONE
    & "&rdr=" & URLEncode($AddRecord);



    var text URL =
    "javascript:" &
    "$.get('" &
    $CheckAndAdd &
    "',function(){" &
    "location.reload(true);" &
    "});"
    & "void(0);";

    If([Invoiced Confirmation]=true,

    "<a class='Vibrant Danger'>Approved</a>",

    "<a class='Vibrant Primary' style='border:1px solid #6BBD57; background-color:#6BBD57'" & "a href=" & $URL & ">Click to Approve</a>")

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 11.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 15:30
    Everything functioned properly except for the add record. 🤷‍♂️

    ------------------------------
    Chris
    ------------------------------



  • 12.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-05-2020 15:48
    Hmm, so yes that is the problem with trying to nest URLs using the javascript refresh method.

    Lets try this syntax

    var text URLONE=
    URLRoot() & "db/" & Dbid()
    & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_183=" & URLEncode(UserToName(User()))
    & "&_fid_233=true"
    & "&apptoken=......";

    var text AddRecord=
    URLRoot() & "db/" & [_DBID_TRANSACTIONS]
    & "?act=API_AddRecord"
    & "&apptoken=....."
    & "&_fid_6=" & [Application/Offer Confirmation Date]
    & "&_fid_44=" & ([Deal %]*100)
    ...........
    & "&_fid_45=" & Round([Payment],0.01);

    var text DisplayRecord = URLRoot() & "db/" & dbid() & "?a=dr&rid=" & [Record ID#];

    var text URL=
    $URLONE
    & "&rdr=" & URLEncode($AddRecord)
    & URLEncode("&rdr=" & URLEncode($DisplayRecord));


    If([Invoiced Confirmation]=true,

    "<a class='Vibrant Danger'>Approved</a>",

    "<a class='Vibrant Primary' style='border:1px solid #6BBD57; background-color:#6BBD57'" & "a href=" & $URL & ">Click to Approve</a>")

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 13.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-06-2020 08:45
    I used to make rich text buttons that were able to perform different tasks, change colors, and change wording all based on specific criteria. URL formula buttons limit capability at least for me and I didn't like that so I made a decision to use only one type for all buttons so I can always control more. I am a bit rusty and lack time until later this week to put something better together but below is how you can make 2 different API's work on a single button. I am rusty because automations have eliminated those types of buttons for me.

    Combine everything together into one statement and wrap it all in an URLEcode like shown below with an rdr added between the commands. You may need to put another URLEncode from the URLRoot until right before the & of the next URLRoot, little foggy on that part. Essentially Quick Base doesn't like doing different API's at the same time out of a formula button unless you do this. I did bolding on my changes.
    var text editadd=
    URLEcode(URLRoot() & "db/" & Dbid()
    & "?act=API_EditRecord&rid=" & [Record ID#]
    & "&_fid_183=" & URLEncode(UserToName(User()))
    & "&_fid_233=true"
    & "&apptoken=......"
    & "&rdr="

    & URLRoot() & "db/" & [_DBID_TRANSACTIONS]
    & "?act=API_AddRecord"
    & "&apptoken=....."
    & "&_fid_6=" & [Application/Offer Confirmation Date]
    & "&_fid_44=" & ([Deal %]*100)
    ...........
    & "&_fid_45=" & Round([Payment],0.01));

    ------------------------------
    Jason Johnson
    ------------------------------



  • 14.  RE: Magic Button Question - Changing Appearance after clicking

    Posted 01-06-2020 10:42
    Thank You, Both!

    Mark - Your code worked and everything's set!

    Jason - I haven't had a chance to try your code yet, since Mark's ended up working, but I'll keep it on my list and test when I have some time. 


    ------------------------------
    Chris
    ------------------------------