Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

ViewBoxes: Build a Star Rating

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

  • ViewBoxes: Build a Star Rating

    The ViewBox control, used in the sample tablet app to create checklist items and custom keypads, is a data control. You can build fully custom controls, complete with event handlers and HTML generated from client-side templates. Data for the ViewBox can be retrieved from local (client-side) or remote (server-side) data sources, making it a suitable light-weight substitute for a list control in your applications.

    There are several ViewBox examples available within Alpha Anywhere, which can be loaded from the ViewBox Builder's Home tab by clicking the "Load Sample ViewBox" link. One of the samples available is the star rating control. In this video, you will learn how to build the star rating control from scratch, showing you along the way how the various features of the ViewBox can be used.

    Creating a 'Star Rating' Control using a ViewBox



    Video Link: https://www.viddler.com/v/f3d65183

    You can download the component used in the video here.

    Prerequisite Knowledge Base

    The ViewBox is similar to the FormView Control. If you're not familiar with the FormView, definitely check out the introductory thread on this subject. The sample application also makes use of the ViewBox. Check out the Checklist Item and Custom Keypads threads to see how the ViewBox was used in both instances to create custom controls.
    • Introduction to the FormView Control: "A very helpful video. Recommended viewing." - Scott Tepper.
      Learn the basics of the FormView Control, Editor Sets, and Editors.
    • Tablet Sample App: Checklist Items: The sample tablet application makes use of the ViewBox control to implement the Checklist Item. Check out this thread about Checklist Items to learn how it works.
    • Tablet Sample App: Custom Keypads: Custom Keypads use the ViewBox to create the keyboard layout. See how you can create your own custom keypads with ViewBoxes in this thread.
    • Tablet Sample App: SVG Images: The star image used in the star rating control is an SVG image. Learn how to create your own SVG images and add them to your web projects in this video from Dan Bricklin.


    Share Your Experience

    Have you built a custom control with the ViewBox or used it as a replacement for your List Control? Share your components, tips, or suggestions you have for working with ViewBoxes with us.
    Last edited by Sarah Mitchell; 04-16-2019, 04:00 PM.
    Sarah Mitchell
    Documentation | Alpha Software Corporation
    Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
    Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube


  • #2
    Re: ViewBoxes: Build a Star Rating

    hello ,
    I have question please about star rating , I have about 10 records on my viewbox ,
    when I make rating for any row on this view box , all the other fields get rated too ,
    how I can make the rating for specific item inside viewbox object ?

    assuming I have 5 records to display in viewbox1
    and there is 5 stars in below each of them ,
    following your method , its working very nice etc , but the problem it rates all the other 4 records when I rate any of the displayed records

    can you advice please ?

    Thanks
    To live anywhere in the world today and be against equality because of race or color is like living in Alaska and being against snow.

    - William Faulkner

    Comment


    • #3
      Re: ViewBoxes: Build a Star Rating

      Originally posted by aal_fareed View Post
      hello ,
      I have question please about star rating , I have about 10 records on my viewbox ,
      when I make rating for any row on this view box , all the other fields get rated too ,
      how I can make the rating for specific item inside viewbox object ?

      assuming I have 5 records to display in viewbox1
      and there is 5 stars in below each of them ,
      following your method , its working very nice etc , but the problem it rates all the other 4 records when I rate any of the displayed records

      can you advice please ?

      Thanks
      Hi Ahmed,

      Would you be willing to post your UX component so I can see what you've built so far? It's hard to say what you need to do without seeing your component.

      Thanks!
      Sarah Mitchell
      Documentation | Alpha Software Corporation
      Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
      Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube

      Comment


      • #4
        Re: ViewBoxes: Build a Star Rating

        Originally posted by Beta Spark View Post
        Hi Ahmed,

        Would you be willing to post your UX component so I can see what you've built so far? It's hard to say what you need to do without seeing your component.

        Thanks!

        Hi Sarah Mitchell,

        Please find the attached component for your reference.
        RadCapture.zip

        As explained earlier I've a viewbox in which list of snaps are there and we need to rate that snaps individually. right now if I'm rating anyone image all the images are getting rated with the same rating. Please help me to resolve this.

        Thanks for the concern.
        Your kind help is appreciated Thanks Alot.
        To live anywhere in the world today and be against equality because of race or color is like living in Alaska and being against snow.

        - William Faulkner

        Comment


        • #5
          Re: ViewBoxes: Build a Star Rating

          Originally posted by aal_fareed View Post
          Hi Sarah Mitchell,

          Please find the attached component for your reference.
          [ATTACH]42212[/ATTACH]

          As explained earlier I've a viewbox in which list of snaps are there and we need to rate that snaps individually. right now if I'm rating anyone image all the images are getting rated with the same rating. Please help me to resolve this.

          Thanks for the concern.
          Your kind help is appreciated Thanks Alot.
          Hello Ahmed,

          When the star control is clicked, you need to set the value of {Ratings} for the corresponding record. [temp].value refers to the value of the ViewBox. This is not the same thing as the value of the star control in a row of your ViewBox. Rather, you should be basing the display of your star rating on the value of {Ratings}. EG:

          Code:
          <div class="star {*if Ratings >=1}selected{*endif} {*if Ratings ==1}actualStarSelected{*endif}" a5-item="starclick" a5-value="1"></div>
          When the control is subsequently clicked, you need to update the value of Ratings in this.data to update the viewbox data and call <viewBoxObj>.refresh. EG:
          Code:
          var picture_id = ia;
          for (var i = 0; i<this.data.length;i++) {
          	if (this.data[i]["Picture_Id"] == picture_id) {
          		this.data[i]["Ratings"] = v;
          		break;
          	}
          }
          
          var vbObj = {dialog.object}.getControl('VIEWBOX1');
          vbObj.refresh();
          Arguments passed to the a5-item are available in the 'ia' variable - as explained in the code comment for the a5-item's click event.

          You can pass in the Picture_Id to the a5-item as an argument like so:
          Code:
          a5-item="Action:{Picture_Id}"
          There are other ways to accomplish the same thing. You could, for instance, send the Picture_Id and new value of Ratings via ajax callback to the server to update the value in the database. Upon successful update, you could call {dialog.object}.refreshViewBoxData('ViewBoxID'), which will fetch the data from the database and update the ViewBox control.
          Sarah Mitchell
          Documentation | Alpha Software Corporation
          Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
          Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube

          Comment


          • #6
            Re: ViewBoxes: Build a Star Rating

            Originally posted by Beta Spark View Post
            Hello Ahmed,

            When the star control is clicked, you need to set the value of {Ratings} for the corresponding record. [temp].value refers to the value of the ViewBox. This is not the same thing as the value of the star control in a row of your ViewBox. Rather, you should be basing the display of your star rating on the value of {Ratings}. EG:

            Code:
            <div class="star {*if Ratings >=1}selected{*endif} {*if Ratings ==1}actualStarSelected{*endif}" a5-item="starclick" a5-value="1"></div>
            When the control is subsequently clicked, you need to update the value of Ratings in this.data to update the viewbox data and call <viewBoxObj>.refresh. EG:
            Code:
            var picture_id = ia;
            for (var i = 0; i<this.data.length;i++) {
            	if (this.data[i]["Picture_Id"] == picture_id) {
            		this.data[i]["Ratings"] = v;
            		break;
            	}
            }
            
            var vbObj = {dialog.object}.getControl('VIEWBOX1');
            vbObj.refresh();
            Arguments passed to the a5-item are available in the 'ia' variable - as explained in the code comment for the a5-item's click event.

            You can pass in the Picture_Id to the a5-item as an argument like so:
            Code:
            a5-item="Action:{Picture_Id}"
            There are other ways to accomplish the same thing. You could, for instance, send the Picture_Id and new value of Ratings via ajax callback to the server to update the value in the database. Upon successful update, you could call {dialog.object}.refreshViewBoxData('ViewBoxID'), which will fetch the data from the database and update the ViewBox control.
            hello , thanks so much for trying to help me i appreciate all the time and effort you put to write all this sarah , but i am getting bit confused with he above code ,
            u r providing the viewbox named rating

            but in the for loop code
            u wrote
            var vbObj = {dialog.object}.getControl('VIEWBOX1');
            viewbox1 should be rating ya ?
            i have tried to apply the above code but i did not success and its coming vertical stars not horizontal its driving me crazy ,
            can you please adjust the code in the component and submit it here to find where is my mistake ?
            i honestly spent over 7 hours without any success i will keep trying till you post me back .

            and for the record i don't need slider i want the user to click the star directly it should be saved and refreshed .
            if you need mysql table i will upload it here just let me know please .
            thank you again
            Ahmed Sh
            To live anywhere in the world today and be against equality because of race or color is like living in Alaska and being against snow.

            - William Faulkner

            Comment


            • #7
              Re: ViewBoxes: Build a Star Rating

              anyone can help please !
              To live anywhere in the world today and be against equality because of race or color is like living in Alaska and being against snow.

              - William Faulkner

              Comment


              • #8
                Re: ViewBoxes: Build a Star Rating

                Originally posted by aal_fareed View Post
                hello , thanks so much for trying to help me i appreciate all the time and effort you put to write all this sarah , but i am getting bit confused with he above code ,
                u r providing the viewbox named rating

                but in the for loop code
                u wrote
                var vbObj = {dialog.object}.getControl('VIEWBOX1');
                viewbox1 should be rating ya ?
                i have tried to apply the above code but i did not success and its coming vertical stars not horizontal its driving me crazy ,
                can you please adjust the code in the component and submit it here to find where is my mistake ?
                i honestly spent over 7 hours without any success i will keep trying till you post me back .

                and for the record i don't need slider i want the user to click the star directly it should be saved and refreshed .
                if you need mysql table i will upload it here just let me know please .
                thank you again
                Ahmed Sh
                Hello Ahmed,

                In the example I posted, I had omitted several tags from the original HTML to make it shorter. You should only have to replace [temp].value with Ratings and pass Picutre_Id as a parameter to the a5-item:

                Code:
                	<div class="star {*if Ratings >=1}selected{*endif} " style="display:inline-block;" a5-item="starclick:{Picture_Id}" a5-value="1">
                		<svg width="30" height="30" viewBox="0 0 15 15" ><path d="M 3,14 L 4.5,9 L 1,6 L 5.5,5.5 L 7.5,1 L 9.5,5.5 L 14,6 L 10.5,9.5 L 12,14 L 7.5,11 L 3,14 z"  /></svg>
                	</div>
                'VIEWBOX1' is the viewbox in your UX Component. var vbObj = {dialog.object}.getControl('VIEWBOX1') gets the viewbox object for VIEWBOX1 in your component so you can call the refresh() method to refresh the viewbox.

                The block of javascript goes in the onClick event for the starclick Item - you can find it on the Items tab in the ViewBox builder for your ViewBox.

                Since you have expressed interest in submitting the data to a database immediately, you will need to write some server-side xbasic to update the value. Instead of the client-side modifications in the previous post, change your starclick onClick method to this:

                Code:
                var picture_id = ia
                var value = v
                
                {dialog.object}.ajaxCallback('','','starAjax','','picture_id='+picture_id+'&value='+value);

                In your starAjax sever-side xbasic function, you can then update the appropriate record. The picture_id and value can be accessed through the e object. For example:

                Code:
                dim picture_id as c = e.picture_id
                dim value as c = e.value
                
                starAjax = "alert('Picture with ID " + picture_id + " was rated " + value + " stars.');"
                After you make changes to the database that the ViewBox is based on, call {dialog.object}.refreshViewBoxData('VIEWBOX1'); to trigger a refresh of the data.

                Also - I advise unchecking the "Selectable" property for the starclick Item. For whatever reason, having that enabled results in all instances of your star rating control to receive the actualStarSelected class rather than the one you selected. You can put conditionals in the ViewBox layout to make the selected star display larger than the others.
                Sarah Mitchell
                Documentation | Alpha Software Corporation
                Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
                Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube

                Comment


                • #9
                  Re: ViewBoxes: Build a Star Rating

                  now we are talking , i did not even notice that you omit some code lol
                  thanks soo much so far i am getting the values on my server side i just need to submit the records and then refresh the grid and things will be great ..
                  thank u so much Sarah you really made my day i have been trying for 2 days doing this although i knew it could be done just wanted to know the trick behind it

                  thank you again and i appreciate your kind help and effort .

                  Ahmed
                  To live anywhere in the world today and be against equality because of race or color is like living in Alaska and being against snow.

                  - William Faulkner

                  Comment


                  • #10
                    Re: ViewBoxes: Build a Star Rating

                    Originally posted by aal_fareed View Post
                    now we are talking , i did not even notice that you omit some code lol
                    thanks soo much so far i am getting the values on my server side i just need to submit the records and then refresh the grid and things will be great ..
                    thank u so much Sarah you really made my day i have been trying for 2 days doing this although i knew it could be done just wanted to know the trick behind it

                    thank you again and i appreciate your kind help and effort .

                    Ahmed
                    You're welcome, Ahmed.

                    When you get things working, would you be willing to post your solution here? I would love to see what you're final product looks like.

                    Good luck!
                    Sarah Mitchell
                    Documentation | Alpha Software Corporation
                    Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
                    Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube

                    Comment


                    • #11
                      Re: ViewBoxes: Build a Star Rating

                      ok its all working fine .. thanks to you I wouldn't make it without your help .

                      and sure I will defenitly update you once I am done I still have more things to do .

                      let me take this chance to ask if you have ever tried to add some features while uploading images .
                      the purpose of uploading images in my app is educational so I am trying to allow users while uploading their pictures from mobiles to add notes - arrows - circles by dragging them into the uploaded picture .

                      any idea how to achieve this using alpha ?

                      thanks again for everything Sarah ,

                      Ahmed Sh
                      To live anywhere in the world today and be against equality because of race or color is like living in Alaska and being against snow.

                      - William Faulkner

                      Comment


                      • #12
                        Re: ViewBoxes: Build a Star Rating

                        Originally posted by aal_fareed View Post
                        ok its all working fine .. thanks to you I wouldn't make it without your help .

                        and sure I will defenitly update you once I am done I still have more things to do .

                        let me take this chance to ask if you have ever tried to add some features while uploading images .
                        the purpose of uploading images in my app is educational so I am trying to allow users while uploading their pictures from mobiles to add notes - arrows - circles by dragging them into the uploaded picture .

                        any idea how to achieve this using alpha ?

                        thanks again for everything Sarah ,

                        Ahmed Sh
                        I believe you already asked about this in another forum. I also see you found my response. For completeness, however, the answer is yes. You can do this. Look into using the Ink Control for adding image annotations. See my response here: http://www.alphasoftware.com/alphafo...l=1#post713823
                        Sarah Mitchell
                        Documentation | Alpha Software Corporation
                        Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
                        Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube

                        Comment

                        Working...
                        X