Jump to content

Disable Button Based On Data In A Field


Recommended Posts

Hello,

 

You can try using javascript for that matter.

 

I am using a "Buy this item" button to connect my report with details page. If you have something similar you can add an HTML block to your report and use javascript. In your case it would be something like that:

 

<script type="text/javascript">
var cb_boolean = '[@calcfield:1]';
if (cb_boolean != '0') 
{
document.write("<input type='button' value='Details' Name='mybutton' onclick='myfunction()'> ");
}
else
{
document.write("<input type='button' value='Home Page' Name='mybutton' disabled=true>"); 


}


function myfunction()
{
window.location.href='url&paramToDetailspage';
}
</script>
 
Replace url&paramToDetailspage with your url to Details page.
 
Cheers,
 
Barbara
Link to comment
Share on other sites

Hi Barbara,

 

Your reply to this post seems to address an issue I am having. However, not knowing a thing about JavaScript (nor HTML for that matter): I am not really sure how to apply this to my app.

 

In my case I have a DataPage where my users can see the initial quantity of product (A), the shipped/ reserved quantity ( B) and then the available quantity: the latter being a calculated field [@calcfield:1] that is equal to (A) - ( B).

I then have an HTML block for my "Create Shipment Request" button. The source code for that is as follows (I copied this from another app):

<div style="margin:10px;"><a href=http://eu1.caspio.com/dp.asp?AppKey=cde830001d57b1a237854adab459&Stock_ID=[@field:Stock_ID]&Product_Description=[@field:Product_Description] style="background:rgb(61, 130, 171); padding:7px 20px; border:1px solid rgb(221, 221, 221); border-image:none:color:rgb(255, 255, 255); font-weight:bold;text-decoration:none;white-space:nowrap;">Create Shipment Request</a></div>

Essentially, I would like this button to be greyed out when [@calcfield:1] = 0 so that my users cannot create a shipment request for something that is out of stock.

 

I would greatly appreciate if you could tell me how amend my HTML block to get my desired result if you have the time.

 

Thanking you in advance for your help!

 

Stephen :)

Link to comment
Share on other sites

Hi Stephen,

 

If I understand correctly you and Barbara, you can enter the following code to your HTML Block:

 

If you want to use a link:

<script type="text/javascript">
var cb_boolean = [@calcfield:1];
if (cb_boolean>0)
{
document.write("<div style='margin:10px;'><a href='http://eu1.caspio.com/dp.asp?AppKey=cde830001d57b1a237854adab459&Stock_ID=[@field:Stock_ID]&Product_Description=[@field:Product_Description]' style='background:rgb(61, 130, 171); padding:7px 20px; border:1px solid rgb(221, 221, 221); border-image:none:color:rgb(255, 255, 255); font-weight:bold;text-decoration:none;white-space:nowrap;'>Create Shipment Request</a></div>");
}
else
{
document.write("<div style='margin:10px;'><span style='background:rgb(61, 130, 171); padding:7px 20px; border:1px solid rgb(221, 221, 221); border-image:none:color:rgb(255, 255, 255); font-weight:bold;text-decoration:none;white-space:nowrap;'>Create Shipment Request</span></div>");
}
</script>

If you want to use a button:

<script type="text/javascript">
var cb_boolean = [@calcfield:1];
if (cb_boolean>0) 
{
document.write("<input type='button' value='Details' Name='mybutton' onclick='myfunction()'> ");
}
else
{
document.write("<input type='button' value='Details' Name='mybutton' disabled=true>"); 
}
function myfunction()
{
window.location.href='http://eu1.caspio.com/dp.asp?AppKey=cde830001d57b1a237854adab459&Stock_ID=[@field:Stock_ID]&Product_Description=[@field:Product_Description]';
}
</script>

I hope, it helps )

Link to comment
Share on other sites

Hi Jan,

Many thanks for taking the time to respond to my post. Much appreciated!

The script you provided for the link works just fine: it prevents users form ordering items that are out of stock and it also passes the parameters to the Shipment Request DataPage as required for those items that are in stock.
However, the small issue is that in terms of the greying out of the button this is happening on the wrong ones; i.e. those items that are available. How do I amend the code so that the correct buttons are not only disabled, but also greyed out in appearance?

Thanks again for your help

 

Stephen :)

Link to comment
Share on other sites

Hi Stephen,

 

If I understand correctly, you can use the following code:

<script type="text/javascript">var cb_boolean = [@calcfield:1];
if (cb_boolean>0)
{
document.write("<div style='margin:10px;'><a href='http://eu1.caspio.com/dp.asp?AppKey=cde830001d57b1a237854adab459&Stock_ID=[@field:Stock_ID]&Product_Description=[@field:Product_Description]' style='background:rgb(61, 130, 171); padding:7px 20px; border:1px solid rgb(221, 221, 221); border-image:none:color:rgb(255, 255, 255); font-weight:bold;text-decoration:none;white-space:nowrap;'>Create Shipment Request</a></div>");
}
else
{
document.write("<div style='margin:10px;'><span style='background:rgb(200, 200, 200); padding:7px 20px; border:1px solid rgb(221, 221, 221); border-image:none:color:rgb(255, 255, 255); font-weight:bold;text-decoration:none;white-space:nowrap;'>Create Shipment Request</span></div>");
}
</script>

You can change the color of disabled button in the following part of the code:

style='background:rgb(200, 200, 200);

If you enter (255, 255, 255) the color will be white, if (0,0,0) - the color will be black.

So, you can try different colors to define which is the best.

 

I hope, it helps.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...