Announcement

Collapse
No announcement yet.

How to create and use css buttons in SC

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to create and use css buttons in SC

    Hi All,

    This is a little tutorial for my sake, but if you get value from it, then that is great.

    So, I had previously used a couple of images for some buttons I had, one being green and one being red to signify if there was an issue somewhere. I thought it needed a bit of a revamp, but dealing with images was always a bit convoluted and you had to upload the images etc, but the css option is actually quite simple.

    1. So, I first started by sourcing a button generator that provided me with css code. I used http://buttonoptimizer.com/ but I am sure there are others. It provided me with the css code I could start with.

    2. On my app (a control app) I created a new php method. I called it button_css().

    3. I added a new field {Fix1} (Label type) to house the button.

    4. I pasted in the button code into the new php method. The code was -

    print("<style type='text/css'>.button1 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px 12px;
    border: 3px solid #54a147;
    border-radius: 0px;
    background: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#b3b3b3));
    background: -moz-linear-gradient(top, #ffffff, #b3b3b3);
    background: linear-gradient(to bottom, #ffffff, #b3b3b3);
    font: normal normal bold 12px arial;
    color: #54a147;
    text-decoration: none;
    }
    .button1:hover,
    .button1:focus {
    border: 3px solid #6dd15c;
    background: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d7d7d7));
    background: -moz-linear-gradient(top, #ffffff, #d7d7d7);
    background: linear-gradient(to bottom, #ffffff, #d7d7d7);
    color: #54a147;
    text-decoration: none;
    }
    .button1:active {
    background: #b3b3b3;
    background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#b3b3b3));
    background: -moz-linear-gradient(top, #b3b3b3, #b3b3b3);
    background: linear-gradient(to bottom, #b3b3b3, #b3b3b3);
    }

    </style>");

    5. I then added a line in the ScriptInit event

    button_css();

    6. Then in the OnLoad event I added the following code to determine with button to display

    if ([errors_found] > 0){

    {status_trans} = "Failed - ".[errors_found]." unbalanced transactions found";
    {Fix1} = "<a href= '../grid_transactions_notbalanced/'><button class='button2' type='button'>Fix Issues</button>";;

    }else{

    {status_trans} = "No unbalanced transactions found";
    {Fix1} = "<button class='button1' type='button'>No Issues</button>";

    }

    {status_trans} is a field to hold a message only. Also note the link to the app to fix the problems (missing if all is OK).

    So now when I run the app, the button changes if there are errors to be reported.

    I have attached images below.

    css_button2.jpgcss_button1.jpg

    Hope that helps someone

    See ya

    Tony
    Last edited by fiscal; 09-19-2015, 02:06 AM.

  • #2
    Nice job - thanks for posting this!

    Comment


    • #3
      Thanks for sharing.

      Comment


      • #4
        hey this is nice, and beneficial, thanks

        while in the same concept, how i can add only print button to control application? there is no default button for print in control!!!

        should we add new button manual and add a code in it? what the code will be?

        thanks again

        Comment


        • #5
          Originally posted by MikeDE View Post
          hey this is nice, and beneficial, thanks

          while in the same concept, how i can add only print button to control application? there is no default button for print in control!!!

          should we add new button manual and add a code in it? what the code will be?

          thanks again
          Hi MikeDE

          Are you saying you wish to print the content of the control application window as it is displayed, or are you asking for something more complex?

          Tony

          Comment


          • #6
            yes please, just a print button in the toolbar of control application, there is no built in button in sc toolbar... did you notice that!? while in grid and form..etc there is, how to add simple button for print to control applications?

            Comment


            • #7
              Add a JS button with code :
              window.print
              /Giuseppe

              Professional Scriptcase Services
              Some Customers opinions

              Comment


              • #8
                Originally posted by Giu View Post
                Add a JS button with code :
                window.print
                no. doesn't give any action

                Comment

                Working...
                X