Star ratings are now a built-in item type for oracle apex forms.
But how do you display them nicely on a report? In particular on a classic report that is displaying cards.
Its not a built-in classic report column type. Would this be easier with a different type of report?
I found the answer to my question pretty well documented here: https://community.oracle.com/message/15550215#15550215
Namely the instructions:
Set the HTML Expression property on the RATING column to:
<span class="fa u-hot-text report-star-rating" data-rating="#RATING#" title="#RATING#" aria-hidden-"true"></span>
<span class="u-VisuallyHidden">#RATING#</span>
Change the u-hot-text to another utility class (if needed) to vary the colour of the stars.
Add this style sheet to the Custom CSS section of the Theme Roller:
.report-star-rating {
white-space: nowrap;
}
.report-star-rating[data-rating="0"]::before {
content: "\f006\f006\f006\f006\f006";
}
.report-star-rating[data-rating="1"]::before {
content: "\f005\f006\f006\f006\f006";
}
.report-star-rating[data-rating="2"]::before {
content: "\f005\f005\f006\f006\f006";
}
.report-star-rating[data-rating="3"]::before {
content: "\f005\f005\f005\f006\f006";
}
.report-star-rating[data-rating="4"]::before {
content: "\f005\f005\f005\f005\f006";
}
.report-star-rating[data-rating="5"]::before {
content: "\f005\f005\f005\f005\f005";
}
The star rating item type can only be used as a standalone form item or as a column in an interactive grid.
You cannot use it in a classic report or an interactive report out of the box - but it should be rather simple to just let your sql output the corresponding read only html, like this:
select
'<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>'
as x from dual
union
select '<span class="fa fa-star"></span>' as x from dual
Related
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
I am currently working within SharePoint 2013 and was wondering if there was a way to create a button on a home page that when pressed, opens a list form in a modal window? (or in a non modal window).
I understand the method of using "Embed code" to code a button; however, it doesn't seem to allow me to link it to a list form, or edit what the button actually does.
Example:
1. An employee lands on the home page and wants to initiate a Purchase Request through the company.
2. The employee clicks on a button labeled "Click here to submit a Purchase Request".
3. After clicking, the Purchase Request form opens from the Purchase Request list (pre-created).
Thank you for your assistance!
You can use something like this in a CEWP to redirect to the new item form:
<button onclick="formRedirect(); return false;">New Form</button>
<script>
function formRedirect() {
window.location = "/test/Lists/LinkList/NewForm.aspx"
}
</script>
To display it in Modal form you will need to use the NewItem2 JS function:
<button onclick="NewItem2(event, "https://Your.SP.Site/_layouts/15/listform.aspx?PageType=8&ListId=%7B59E6FE0C%2D02C6%2D4B00%2D9B6A%2D87116A2DF594%7D&RootFolder="); return false;">New Form</button>
To get this to work you will need the list web part on the page where the button is located, though it can be hidden from view by setting th chrome to none and minimizing it. You can copy the function from the new item button in the list you wish to display, it is stored as an 'OnClick' property.
I know I am late to this but I just figured how to do this for the "Upload Document" for a document library. It took me a while but I stumbled upon it through trial and error using F12. I will provide both script for a "LIST and LIBRARY" form.
FOR A LIST:
<a href="#" onclick="openDialog('YourSiteURL/Lists/YourListName/NewForm.aspx');">
<img src="YourSiteImageURL" alt="NameofYourImage">
</a>
<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'NameofYourForm', /* Enter the name you want for your form */
allowMaximize: false,
showClose: true,
width: 1225, /* Modify for your needs */
height: 800 /* Modify for your needs */
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
FOR A LIBRARY:
This is for use with a button:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">
<img src="URLforYourButtonImage" alt="NameofYourButton">
</a>
This is for use with text:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">Add document
</a>
Hi I have a list of values contains different types of prices for the plans..
<div id="rs360">
<span class="font18">Rs.360</span> <span class="font20"></span>
</div>
<th width="20%" class="bdrL_blue valignT highlight">
<img src="../../Content/Images/Subscribe now on click.png" class="btn" onclick="return sms_confirm()"/>
<div id="rs1000">
<span class="font18">Rs.1000</span> <span class="font20"></span>
</div>
// the same button event...
when i click the button it should take the value of prices 360 ,1000.. then it redirects to the another page. on that page i click some payment options. so it should show which amount i select here like that...
i don't know what is the best way to do this? please give some ideas to do that?
So you want transfer the values 360, 1000... to your payment page?
[HttpPost]
public ActionResult YourActionName(double? price)
{
Session("PickedPrice")=price;
}
then your button event is call the controller with your value is price, for ex :
$.post("Controller/YourActionName",{ price : value_of_your_price });
In your payment's page you can use it by using Session("PickedPrice"), when you done, reset Session("PickedPrice").
This is my solution, it's may not the best way and I just newbie but I want to help you. Try!
I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box. Please help me with exact code example. Thank you so much in advance!
Here is the preview of what I have so far: http://www.endsnore.com/_test1/marketing5.html
Here is an example of what I want to happen on tablet and phone view: http://www.endsnore.com/_test1/images/_delete14.jpg
You can't have that layout without doing some jquery or javascript. There is no built-in css solution or even javascript from Foundation that will do the trick for you.
You can try this solution. First you need to have a layout something like this:
<div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>
And then have this script to move the first image on top:
$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Take note that the script only works on load of the page and not when resizing the browser - I don't think you will need it that way anyway. But for whatever reason you do, then just enclose the "width" logic in a resize function, something like:
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Is there a simple way to accomplish this using dojo (jQuery would be easier for me but I have to use dojo): I have a simple unordered list. I don't want dojo to style the list (as it might if I used some widget). When I click a link on the list I want to show a div associated with the link. Then if I click another link in the list the first div hides and that one shows.
<div id="content">
<h2>Header</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div id="sub_content1" style="display:none;">
<h3>Sub Content Header 1</h3>
<p>Lorem ipsum veritas britas conflictum civa</p>
</div>
<div id="sub_content2" style="display:none;">
<h3>Sub Content Header 2</h3>
<p>Lorem ipsum mobius ceti</p>
</div>
<div id="sub_content3" style="display:none;">
<h3>Sub Content Header 3</h3>
<p>Lorem ipsum citrus pecto</p>
<ul>
<li>Lemons</li>
<li>Limes</li>
</ul>
</div>
</div><!-- end of #content -->
So in fact you're creating your own tabcontainer? If you really want to do it yourself you should probably need something like this:
require(["dojo/ready", "dojo/on", "dojo/dom-attr", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"], function(ready, on, domAttr, domStyle, query) {
ready(function() {
query("ul li a").forEach(function(node) {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "none");
});
on(node, "click", function(e) {
query("ul li a").forEach(function(node) {
if (node == e.target) {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "block");
});
} else {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "none");
});
}
});
});
});
});
});
I'm not sure how familiar you are with Dojo, but it uses a query that will loop all links in lists (with the dojo/query and dojo/NodeList-dom modules) (you should provide a classname or something like that to make it easier). Then it will, for each link, retrieve the div corresponding to it and hide it, it will also connect a click event handler to it (with the dojo/on module).
When someone clicks the link, it will (again) loop all the links, but this time it's doing that to determine which node is the target one and which isn't (so it can hide/show the corresponding div).
I made a JSFiddle to show you this. If something is still not clear you should first try to look at the reference guide of Dojo since it really demonstrates the most common uses of most modules.
But since this behavior is quite similar to a TabContainer, I would recommend you to look at the TabContainer reference guide.