Skip to Content

SORRY GUYS!!!

My deepest

apologies

, I had not read all of Thomas’ weblogs yet on the JavaScript stuff although I have them all bookmarked and waiting to be read and therefore I have done what I don’t think anyone else has so far done and that is create a weblog covering the same topic or close to the same topic.

BSP Custom Elements: Open Source JavaScript Part 3

No need to read further…

Ok, you have a htmlb:textedit field and you are allowing the user to input some text, write a review or whatever. Well you don’t want to give the ability to write a novel and you don’t just want to cut them off cold so what do you do? Provide a link that they can click and see how many characters they’ve typed or perhaps a nice little counter window? What about a nice graphical progress bar?

Some of you are probably at this point saying, “hey Craig! this is going against your recent accesibility series ,” and that may be but sometimes the need is there and you have a limited number of options.

So what have I done? I’ve gone out again to one of my favorite websites, Dynamic Drive and found a great little script and then figured out how to get into my BSP.

So for test purposes go ahead and create a simple “Page with Flow logic” and let’s get started. Then take a look at this OnChange Event for inputField for some nice tips on how to get JavaScript events into place.

      .progress

     

      /***********************************************

     

     

  • Modified by Dynamic Drive for minor changes

     

     

  • Please keep this notice intact

      ***********************************************/

      function textCounter(field,counter,maxlimit,linecounter) {

           // text width//

           var fieldWidth =  parseInt(field.offsetWidth);

           var charcnt = field.value.length;

           // trim the extra text

           if (charcnt > maxlimit) {

                field.value = field.value.substring(0, maxlimit);

           }

           else {

           // progress bar percentage

           var percentage = parseInt(100 – (( maxlimit – charcnt) * 100)/maxlimit) ;

           document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+”px”;

           document.getElementById(counter).innerHTML=”Limit: “percentage“%”

           // color correction on style from CCFFF -> CC0000

           setcolor(document.getElementById(counter),percentage,”background-color”);

           }

      }

      function setcolor(obj,percentage,prop){

           obj.style[prop] = “rgb(80%,”(100-percentage)“%,”(100-percentage)“%)”;

      }

     

image

      .progress

     

      /***********************************************

     

     

  • Modified by Dynamic Drive for minor changes

     

     

  • Please keep this notice intact

      ***********************************************/

      function textCounter(field,counter,maxlimit,linecounter) {

           // text width//

           var fieldWidth =  parseInt(field.offsetWidth);

           var charcnt = field.value.length;

           // trim the extra text

           if (charcnt > maxlimit) {

                field.value = field.value.substring(0, maxlimit);

           }

           else {

           // progress bar percentage

           var percentage = parseInt(100 – (( maxlimit – charcnt) * 100)/maxlimit) ;

           document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+”px”;

       if ( parseInt(percentage) > 95 ) {

           document.getElementById(counter).src = “bar_red.gif”;

       } else if ( parseInt(percentage) > 85 ) {

                   document.getElementById(counter).src = “bar_yellow.gif”;

              } else {

                   document.getElementById(counter).src = “bar_green.gif”;

              }

      

           document.getElementById(counter + ‘_text’).innerHTML= ” “percentage“%”

           }

      }

     

     

     

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

      1. Thomas Jung
        Well if nothing else it ought to get people’s attention for this solution.  They can see that we both thought this particular piece of JavaScript was good enought to write about. 
        (0) 
  1. Artem Gratchev
    Just some comments from the technical side:

    – The script counts characters, but not bytes. There can be problems with national symbols when the limit caused by the storage buffer length.

    And about the usability:

    – The element for showing the percentage is non-standard and the colors are not depending on the current BSP theme.

    – This is not obvious that the percentage element belongs to the textbox.

    – IMHO It would be usefull to show the exact number of symbols than percentage. Especially when the max length is not big (less than 1000). Example: “20 of 40 symbols left” or “20/40” is besser than “Limit: 50%”

    – The label “Limit:” is not obvious. What does it mean: 50% left or 50% used?

    (0) 
    1. Craig Cmehil
      Hi Artem,

      Since we are client side we really only the ability to count characters and then display as you pointed out 20 of 40 or 20/40 or 50%.  I agree with you though the ability to count actualy bytes for buffer sizes would be nice but since we are talking about text and you created your field as TYPE C LENGTH 200 how much of a role do the bytes play?

      In terms of the usability, you are absolutly correct it’s non-standard for BSP’s and the colors are not based on the BSP theme. Unfortunately we’ve all come across this before and we’ve all learned that as powerful as BSP is it can’t do everything and since BSP doesn’t have a nice feature for this purpose two people, two different people came up with the same solution and posted them here as a weblog. As for the colors, well I tried in the beginning to grab the CSS Classes that SAP uses and they changed them on me after a release or two.  So that leaves us with the option of Max’s weblog on BSP Themes.

      You are once again correct that the label is not so obvious but as you can see with the code samples this is completely changeable and configurable by the developer. In which case they can then decide what the text says, or the color or what not. Me I changed my new an image that was 100px long a bit more 3D and change the width of the image based on the current percent.

      But again the idea here is to just open the eyes of the developers to possibilities and not provide a fixed and non-changable solution.

      I appreciate your points they are things that each developer needs to keep in mind if they do things like that to ensure there is clarity in the applications and not items that are unobvious.

      Thanks again for the comments!!! I appreciate all of them!

      Craig

      (0) 
      1. Artem Gratchev
        Hi Craig 🙂

        Concerning the character<->byte problem I do not know the solution. I have just written this to point to the possible problems.
        We had similar problems with htmlb:inputfield because it has the standard attribute for the text limitation. In some languages (Korean for example) the characters take two positions in teh variable TYPE C LENGTH 200. In chinese some characters take one byte – some two. As you see the problem can be very complicated. I guess that only koreans and chineses know the correct solution. So my advice is just do nothing but remember about the possible problem.

        Concerning the styles there are two ways to keep the element in the BSP style:
        – first you have mentioned – seek and use style from HTMLB stylesheet.
        – second – render standard htmlb element (for example htmlb:Label) and try to access it’s content via javascript.
        Both methods do not guarantee that your solution will work for the further versions (SPs) of the BSP. However when you develop your own visual for HTMLB library you are to check operability of your visual element for each version of the HTMLB.

        With best regards,
        Artem.

        (0) 
        1. Craig Cmehil
          Hi Artem,

          I see your point with the character byte problem and you are probably right, only the Chinese and Korean know the best way for them 🙂

          For example in the additional code I access the textView element simply enough so there are possibilities but not simple ones as you yourself has just stated.  Therefore something like Thomas and myself have written about is just about the easiest way as it is outside the HTMLB element area.

          Craig

          (0) 
  2. Artem Gratchev
    Another question:
    I’m new here and I’m wondering why almost everybody use the

    . Especially for short code examples.

    Unfortunatelly the standard SND blog style makes the text within
    too small. But it cna be changed by style override.

    I just insert the following code to the beginning of my blog:
    code, pre
    {
    font-size:100%;
    }
    pre
    {
    margin: 10px;
    padding: 5px;
    border: 1px solid black;
    }


    See the result: 1001 mistake in BSP programing: #1 Reaction time

    (0) 
    1. Artem Gratchev
      Ooops!
      the

      was not escaped.
      -----------------------------------
      Reposting
      -------------------------------

      Another question:
      I'm new here and I'm wondering why almost everybody use the
      . Especially for short code examples.

      Unfortunatelly the standard SND blog style makes the text within
      too small. But it cna be changed by style override.

      I just insert the following code to the beginning of my blog:
      code, pre
      {
      font-size:100%;
      }
      pre
      {
      margin: 10px;
      padding: 5px;
      border: 1px solid black;
      }


      See the result: 1001 mistake in BSP programing: #1 Reaction time
      (0) 
      1. Craig Cmehil
        We started by doing the postings that way and somewhere along the line I started using textareas or Thomas did and then everyone just liked them more. It was easier to copy and paste and maintain the formatting and everything so that is why we continue to use them, just have to remember to use the HTML character codes for your ><symbols and thingds.
        (0) 
        1. Anonymous
          I agree with that history but I must dissent. I hate text areas for code. HATE them. I think this is very weird and is not how I am accustomed to seeing code samples eleswhere. This in fact is the only place I have ever seen text area used this way. Please just fix the CSS that makes pre and code text to small. My .02 euros.
          (0) 
          1. Craig Cmehil
            The CSS is pretty much the only reason we do it, until that changes I doubt any of us will change. For me it doesn’t matter much, CSS or textarea it’s 6 of 1 and half dozen of another.
            (0) 
        2. Artem Gratchev
          Aha.
          Now I understand. Just forgot that there is the possibility to “not to escape <“.

          I’m used to escape them everytime when posting something to web. So for me the pre and the textarea are the same from posting point of view, only the textarea is annoying. It ruins the page scrolling with mouse scroller.

          Thanks for exlanation. I had to guess this by myself before 🙂

          (0) 

Leave a Reply