Alpha DevCon 2018
Results 1 to 12 of 12

Thread: ViewBoxes: Build a Star Rating

  1. #1
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    399

    Default 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: http://www.alphasoftware.com/video-library/?v=4964

    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 Beta Spark; 09-08-2015 at 01:42 PM.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  2. #2
    Member aal_fareed's Avatar
    Real Name
    Ahmed Shahin
    Join Date
    May 2010
    Location
    Saudi Arabia - Jeddah
    Posts
    386

    Default 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

  3. #3
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    399

    Default Re: ViewBoxes: Build a Star Rating

    Quote 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

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  4. #4
    Member aal_fareed's Avatar
    Real Name
    Ahmed Shahin
    Join Date
    May 2010
    Location
    Saudi Arabia - Jeddah
    Posts
    386

    Post Re: ViewBoxes: Build a Star Rating

    Quote 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

  5. #5
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    399

    Default Re: ViewBoxes: Build a Star Rating

    Quote Originally Posted by aal_fareed View Post
    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.
    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

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  6. #6
    Member aal_fareed's Avatar
    Real Name
    Ahmed Shahin
    Join Date
    May 2010
    Location
    Saudi Arabia - Jeddah
    Posts
    386

    Default Re: ViewBoxes: Build a Star Rating

    Quote 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

  7. #7
    Member aal_fareed's Avatar
    Real Name
    Ahmed Shahin
    Join Date
    May 2010
    Location
    Saudi Arabia - Jeddah
    Posts
    386

    Default 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

  8. #8
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    399

    Default Re: ViewBoxes: Build a Star Rating

    Quote 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

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  9. #9
    Member aal_fareed's Avatar
    Real Name
    Ahmed Shahin
    Join Date
    May 2010
    Location
    Saudi Arabia - Jeddah
    Posts
    386

    Default 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

  10. #10
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    399

    Default Re: ViewBoxes: Build a Star Rating

    Quote 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

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  11. #11
    Member aal_fareed's Avatar
    Real Name
    Ahmed Shahin
    Join Date
    May 2010
    Location
    Saudi Arabia - Jeddah
    Posts
    386

    Default 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

  12. #12
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    399

    Default Re: ViewBoxes: Build a Star Rating

    Quote 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

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

Similar Threads

  1. ZebraHost Review - Outstanding Five Star.
    By CharlesParker in forum Mobile & Browser Applications
    Replies: 10
    Last Post: 12-11-2015, 04:14 PM
  2. 5 Star Rating System
    By 13axtula in forum Database Design
    Replies: 2
    Last Post: 09-19-2010, 05:10 PM
  3. Flying Star Tabbed UI-- Great Start, Disasturess Finish LOL
    By bbscop in forum Application Server Version 10 - Web/Browser Applications
    Replies: 3
    Last Post: 08-29-2010, 09:28 AM
  4. rating Alpha Five on the Intuit Web site
    By Richard Rabins in forum Alpha Five Version 4
    Replies: 0
    Last Post: 01-08-2003, 06:59 AM
  5. rating Alpha Five on the Intuit Web site
    By Richard Rabins in forum Announcements
    Replies: 0
    Last Post: 01-08-2003, 06:58 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •