Apex Code Development You need to sign in to do that
Don't have an account?
how can i acheieve this
The requirement was to create a Radio button(RB) application in SF. Where a person must be able to rate an application with values 1-5 and these values must be Radio button.
What or how must a developer create it
What or how must a developer create it
http://blogs.developerforce.com/developer-relations/2013/11/goinstant-visualforce-create-real-time-multi-user-apps-on-the-salesforce-platform.html
A sample code provided below:
<h5 id="revHighlights">Review Highlights</h5> <div class="review-highlights"> <div class="rating-value" id="averageRatingValue">3.1</div> <div class="rating-rest"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:listingRating"> <div class="rating-block "><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:listingRating:ratingComponent:rating-stars-value" class="rating-stars rating-stars-30"></span> </div></span> <div class="rating-text">out of 5</div> <div class="rating-amount-reviews" id="numberOfReviews"> (21 reviews) </div> </div> </div> </div> <div class="post-container-inner post-container-inner-2"> <h5 id="revDistribution">Rating Distribution</h5> <div class="rating-distribution"> <label> <a href="javascript:void(0);" id="linkFilterDistribution" onClick="applyFilter(5);"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:starsRatings:0:textFilterDistribution">5 Stars</span> </a> </label> <div alt="5 Stars : 5 reviews" class="complete-bar" style="background-position: -77px 0px;" title="5 Stars : 5 reviews"></div> <label> <a href="javascript:void(0);" id="linkFilterDistribution" onClick="applyFilter(4);"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:starsRatings:1:textFilterDistribution">4 Stars</span> </a> </label> <div alt="4 Stars : 6 reviews" class="complete-bar" style="background-position: -72px 0px;" title="4 Stars : 6 reviews"></div> <label> <a href="javascript:void(0);" id="linkFilterDistribution" onClick="applyFilter(3);"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:starsRatings:2:textFilterDistribution">3 Stars</span> </a> </label> <div alt="3 Stars : 3 reviews" class="complete-bar" style="background-position: -86px 0px;" title="3 Stars : 3 reviews"></div> <label> <a href="javascript:void(0);" id="linkFilterDistribution" onClick="applyFilter(2);"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:starsRatings:3:textFilterDistribution">2 Stars</span> </a> </label> <div alt="2 Stars : 1 review" class="complete-bar" style="background-position: -96px 0px;" title="2 Stars : 1 review"></div> <label> <a href="javascript:void(0);" id="linkFilterDistribution" onClick="applyFilter(1);"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:starsRatings:4:textFilterDistribution">1 Star</span> </a> </label> <div alt="1 Star : 6 reviews" class="complete-bar" style="background-position: -72px 0px;" title="1 Star : 6 reviews"></div> </div> </div></span> <div class="post-container-inner post-container-inner-4"> <div class="vert-hack"> <p>Share your experiences with the community.</p> <a class="btn-link" href="javascript:void(0)" id="write_review_link2" onclick="return onClickWriteEditReview();"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:writeEditReviewButton">Write a Review</span> </a> </div> </div></span> </div> <div class="post-container-form" id="post_container_form" style="display: none;"> <h5>Your review</h5> <div class="review-text" id="review_text"><input id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:title" type="text" name="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:title" class="input-text-feed input-has-default" maxlength="100" title="Review Title" /><textarea id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:comments" name="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:comments" class="textarea-feed input-has-default" onkeydown="return validateMultilineInput(this, 'noOfCharsIncommentTxtReviews', 2000, '{0} characters left', ',',true, true, event,'The comment that you entered is too long. You can enter a maximum of {0} characters.', 'post_review');" onkeyup="return validateMultilineInput(this, 'noOfCharsIncommentTxtReviews', 2000, '{0} characters left', ',',true, true, event,'The comment that you entered is too long. You can enter a maximum of {0} characters.', 'post_review');" rows="5" title="Comments"></textarea> <span class="sub-text" id="noOfCharsIncommentTxtReviews"></span> <span class="sub-text sub-text-error" id="noOfCharsIncommentTxtReviewsOverflow"></span> <script type="text/javascript"> jQuery(document).ready(function() { validateMultilineInput(document.getElementById('listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:comments'), 'noOfCharsIncommentTxtReviews', 2000, '{0} characters left', ',',true, true, null,'The comment that you entered is too long. You can enter a maximum of {0} characters.', 'post_review'); validateMultilineInputOnPaste('listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:comments', 'noOfCharsIncommentTxtReviews', 2000, '{0} characters left', ',', true, true, 'The comment that you entered is too long. You can enter a maximum of {0} characters.', 'post_review'); }); </script> </div> <div class="review-buttons" id="review_buttons"> <div class="review-buttons-stars"> <p>Please rate your overall experience with this app.</p> <div class="rating-form-block"> <input class="vote-star" id="overStars1" name="overstars" title="1 star" type="radio" value="1" /> <input class="vote-star" id="overStars2" name="overstars" title="2 stars" type="radio" value="2" /> <input class="vote-star" id="overStars3" name="overstars" title="3 stars" type="radio" value="3" /> <input class="vote-star" id="overStars4" name="overstars" title="4 stars" type="radio" value="4" /> <input class="vote-star" id="overStars5" name="overstars" title="5 stars" type="radio" value="5" /> </div> </div> <div class="review-buttons-post"> <button class="btn btn-strong btn-strong-secondary" id="cancel_review2" onclick="return onClickCancelReview();" title="Cancel" type="button"> <span class="button-text">Cancel</span> </button><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:j_id543" style="display: none;"></span> <a class="btn btn-strong btn-strong-primary" id="post_review" onClick="postThisReview()" title="Post Review"> <span class="button-text"><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:postReviewLink">Post Review</span> </span> </a> <span class="sub-text">It may take up to an hour for your review to post to the site.</span> </div> </div> </div> <script type="text/javascript"> jQuery('#overStars0').attr('checked','checked'); </script> </div><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:j_id547"><div id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:helpfulContainer" class="helpful-container"> <div class="container container-1"> <div class="container-inner"> <div class="listing-content-block"> <h5>Most Helpful Positive Review</h5><span id="listingDetailPage:AppExchangeLayout:listingDetailForm:listingDetailReviewsTab:reviewsTabComponent:mostHelpfulPositive"> <div class="feed-item feed-item-review" data-id="MPa0S3000000EIr2AEAT"> <a class="feed-poster" data-feed-item-profile="user1" href="profile?u=00530000006A68hAAC" id="reviewersPic"> <img class="listing-logo" src="/profilephoto/005/T" /> </a>Let me know If it helps you!