Custom HTML buttons for close form and close tab

Rennur

Help with custom form button.

Searching through the forum I have found one post where a custom close tab button was requested

aware_support

Try the following in your onclick handler:

onclick="AwareApp.closeComponent(AwareApp.getFormPanel(this), true));"

The last flag should be true if you want Aware IM to automatically perform "go back" operation after closing

Rennur

Thank you support for a quick response,

Try the following in your onclick handler:

onclick="AwareApp.closeComponent(AwareApp.getFormPanel(this), true));"

The last flag should be true if you want Aware IM to automatically perform "go back" operation after closing

Worked. (One to many ")" at the end)

onclick="AwareApp.closeComponent(AwareApp.getFormPanel(this));"

Action = Closes current tab.

onclick="AwareApp.closeFormWindow(AwareApp.getFormPanel(this));"

Action = Cancels the pop-up window

Below is some custom button CSS & Code for the form's HTML element.

 <style type="text/css">
    .buttongreen {
    display: inline-block;
    background: #66ab04;
    -webkit-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
    -moz-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
    box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0px 1px 1px #497a03;
    padding: 6px 30px;
    border-color: #5b9904;
    border-width: 1px;
    border-style: solid;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
}
  .buttonbuttongreen a{font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}
.buttonbuttongreen:hover {
    background: #9bce00;
    -webkit-box-shadow: 0px 1px 0px 0px #add72e inset, 0px 0px 0px 4px #d5efab;
    -moz-box-shadow: 0px 1px 0px 0px #add72e inset, 0px 0px 0px 4px #d5efab;
    box-shadow: 0px 1px 0px 0px #add72e inset, 0px 0px 0px 4px #d5efab;
    text-shadow: 0px 1px 1px #698c00;
    border-color: #93c300;
    text-decoration: none;
}
.buttonred {
    display: inline-block;
    background: #f5513c;
    -webkit-box-shadow: 0px 1px 0px 0px #ff8272 inset, 0px 0px 0px 4px #e6e6e6;
    -moz-box-shadow: 0px 1px 0px 0px #ff8272 inset, 0px 0px 0px 4px #e6e6e6;
    box-shadow: 0px 1px 0px 0px #ff8272 inset, 0px 0px 0px 4px #e6e6e6;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all 0s 0;
    -moz-transition: all 0s 0;
    -o-transition: all 0s 0;
    transition: all 0s 0;
    text-shadow: 0px 1px 1px #9c3528;
    padding: 6px 30px;
    border-color: #ec513c;
    border-width: 1px;
    border-style: solid;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}
  .buttonred a{font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
   text-decoration: none;
}

.buttonred:hover {
 background: #ff6551;
    -webkit-box-shadow: 0px 0px 0px 4px #ffbfab;
    -moz-box-shadow: 0px 0px 0px 4px #ffbfab;
    box-shadow: 0px 0px 0px 4px #ffbfab;
    border-color: #ed5e4b;
   text-decoration: none;
}

.buttonyellow {
    display: inline-block;
    background: #ffc835;
    -webkit-box-shadow: 0px 1px 0px 0px #ffd564 inset, 0px 0px 0px 4px #e6e6e6;
    -moz-box-shadow: 0px 1px 0px 0px #ffd564 inset, 0px 0px 0px 4px #e6e6e6;
    box-shadow: 0px 1px 0px 0px #ffd564 inset, 0px 0px 0px 4px #e6e6e6;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0px 1px 0px #ffe6a5;
    padding: 6px 30px;
    border-color: #ebae3e;
    border-width: 1px;
    border-style: solid;
    font-family: Arial, Helvetica, Sans-serfi;
    font-size: 14px;
    color: #4f2f2f;
    font-weight: bold;
}
.buttonyellow a{   

    font-family: Arial, Helvetica, Sans-serfi;
    font-size: 14px;
    color: #4f2f2f;
    font-weight: bold;
    text-decoration: none;
}
.buttonyellow:hover {    

    background: #ffd200;
    -webkit-box-shadow: 0px 1px 0px 0px #ffe04f inset, 0px 0px 0px 4px #ffed99;
    -moz-box-shadow: 0px 1px 0px 0px #ffe04f inset, 0px 0px 0px 4px #ffed99;
    box-shadow: 0px 1px 0px 0px #ffe04f inset, 0px 0px 0px 4px #ffed99;
    border-color: #ffc835;
    text-decoration: none;
}
</style>
<div style="margin:5px" class="buttongreen"><a href="#" onclick="AwareApp.saveForm (this)">SAVE</a></div>
<div style="margin:5px" class="buttonred"><a href="#" onclick="AwareApp.closeComponent(AwareApp.getFormPanel(this));">CLOSE</a></div>
<div style="margin:5px" class="buttonred"><a href="#" onclick="AwareApp.closeFormWindow(AwareApp.getFormPanel(this));">CANCEL</a></div>

Image of the button found here

customaware

Hi Rennur,

Any idea how one might implement a button on a Presentation for this please?

onclick="AwareApp.closeComponent(AwareApp.getFormPanel(this));"

Tried force feeding it into the Hyperlink of an image button but no go.

Rennur

This should close the tab

<button onClick="AwareApp.closeComponent(AwareApp.getFormPanel(this));" type="button" class="buttongreen" role="button"> Close </button>

customaware

This is on a Presentation Rennur rather than a HTML cell on a form.

Only been able to see options for Link to URL for an Image and the options are

Specify

Determined by contents of the tag

Neither will allow that sort of string.

Rennur

Helps to read the post properly :oops:

Try this in the URL
javascript:AwareApp.closeComponent(AwareApp.getFormPanel(this));

customaware

Close but no cigar.

javascript:AwareApp.closeComponent(AwareApp.getFormPanel(this));

actually triggers the opening of a new page in the browser about:blank

Tried changing to

javascript:AwareApp.closeComponent(AwareApp.getFormPanel(this),true);

but no change.

Might just display it in a Pop-Up instead and will then have a close button.