I have a label which display a given text coming from a String variable.
This variable can have two different values and for each value I have a translated version from english to my native language stored in a property file.
I have the following code:
add(new Label("fruit", new PropertyModel(getModelObject(), "fruit.name")));
and HTML:
<wicket:panel xmlns:wicket="http://wicket.apache.org/">
<div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5">
<wicket:message key="myBasket.fruit">
</wicket:message>
</div>
<div class="col-sm-7">
<span wicket:id="fruit"></span>
</div>
</div>
</div>
</div>
</div>
</wicket:panel>
This fruit can be either apple or pear.
In my property file I have a translation for both values:
apple=Apfel
pear=Birne
When I run my code, the content of my label displays in English.
How can I set the value coming from the property file based on the value of the variable?
Thank you!
take a look at class StringResourceModel. You should use it as model for your Label. See user guide.
Related
I Am trying to open datepicker from textbox. Datepicker open but not showing properly. ( Check Ref Image ).
Can anyone help me ....
Script:-
<script>
$('#milksaledate').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
</script>
Modal Text Box
<div class="col-md-3">
<div class="form-group">
<label>Date of Sale <span class="validate">*</span> :</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" name="milksaledate" id="milksaledate">
</div>
</div>
</div>
Script
<script src="plugins/datatables/jquery-3.5.1.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
[![enter image description here][1]][1]<script src="plugins/jquery-ui/jquery-ui.js"></script>
There could be multiple reasons for this:
Is it maybe possible you have multiple inputs where the id is milksaledate? I think in general it's better to use something like $('.datepicker').datepicker(..) and add class='datepicker' to each input which uses the datepicker.
When are you calling $('#milksaledate').datepicker(..)? Is it on page load, or after the modal has opened? Because if you call this code before a modal has initialized, the datepicker will not affect the modal.
Another reason could be due to z-index or other style issues concerned specifically to jquery-ui
I was trying to create custom feature in User(sys_user) section to Save a photo and caption to a custom table. I want to save the photo and caption and show all the uploaded photo as thumbnail along with caption. But when I tried to call client-script it is not even trigger the function in client script. Following are the steps i followed
Created a UI macro with following code
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div class="container">
<g:ui_form>
<h1>Choose an image file:</h1>
<p>Supported file types: .jpg, .png, .bmp, .gif, .jpeg, .ico, .svg</p>
<div class="row">
<input name="site_photo_upload" id="site_photo_upload" type="file" class="upld-file" style="padding:20px;"></input>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="fieldone" style="width:100px">Description</label>
<div class="col-sm-10">
<input type="text" name="site_photo_caption" id="site_photo_caption" class="form-control col-md-3" id="fieldone"
placeholder="Enter Description maximum 40 letters..." style="width:300px;height:75px;"></input>
</div>
</div>
<div class="form-group" style="padding:20px;">
<button id="btn_cancel">Cancel</button>
<g:dialog_button id="btn_submit_site_photo" name="btn_submit_site_photo" onclick="saveValues()" type="button" class="btn">Upload</g:dialog_button>
</div>
</g:ui_form>
</div>
<div class="container" style="padding:30px 0;border-top:1px solid #ccc;">
<div class="card-deck">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" style="padding:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="card-img-top" style="width:100%;" src="https://picsum.photos/309/200?image=1050"
alt="Card image cap"></img>
<p class="card-text" style="padding:10px 0;">caption placeholder</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" style="padding:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="card-img-top" style="width:100%;" src="https://picsum.photos/309/200?image=1050"
alt="Card image cap"></img>
<p class="card-text" style="padding:10px 0;">caption placeholder</p>
</div>
</div>
</div>
</div>
</j:jelly>
Created a formatter and added the formatter in User form through 'Form Design'. It successfully displayed as below
Create a table 'u_sitephoto' with columns site_photo, site_photo_caption and a reference column userid to User table
Create a client script in 'OnLoad' type
function saveValues() {
var site_photo = document.getElementById("site_photo_upload").value;
var site_photo_caption = document.getElementById("site_photo_caption").value;
var sitephoto_record = new GlideRecord('u_sitephoto');
sitephoto_record.initialize();
sitephoto_record.setValue('site_photo', site_photo);
sitephoto_record.setValue('site_photo_caption', site_photo_caption);
sitephoto_record.insert();
}
But I am getting the following error when clicking the Upload button
Uncaught ReferenceError: saveValues is not defined at
HTMLButtonElement.onclick
I would like to get some help for resolving the following issues
To resolve above error, and trigger the client script on button click
Reload the image thumbnails(currently added some placeholder images as shown in the image) with all the uploaded photos for that user
On cancel button click remove the selected photo for uploading
Thanks in advance for your great suggestions & helps
Try following about how to resolve the 1st issue.
UI macro is rendered in server side, so it can't retrieve functions from a Client Script.
You can define the function directly in <script> tag of UI macro.
Within the function, use GlideAjax to call backend Script Include in which you can put your code of creating a new record of 'u_sitephoto' table.
BTW, I am using Paris version of ServiceNow.
Sample function in UI macro:
function saveValues() {
<!-- You could use $j to call JQuery in UI macro -->
var site_photo = $j("#site_photo_upload").get(0).files[0];
var site_photo_caption = $j("#site_photo_caption").val();
var ajax = new GlideAjax('SitePhoneUtils');
ajax.addParam('sysparm_name', 'savePhotos');
ajax.addParam('sysparm_site_photo', site_photo);
ajax.addParam('sysparm_photo_caption', site_photo_caption);
ajax.getXML();
}
Sample function in Script Include - SitePhoneUtils
savePhotos: function() {
var site_photo = this.getParameter('sysparm_site_photo');
var site_photo_caption = this.getParameter('sysparm_site_photo_caption');
var gr = new GlideRecord('u_sitephoto');
gr.initialize();
gr.site_photo = site_photo;
gr.site_photo_caption = site_photo_caption;
gr.insert();
}
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
Html :
<div class="info">
<div class="title">
<div class="{DYNAMIC CLASS NAME}">
Text
</div>
</div>
</div>
<div class="info">
<div class="title">
<div class="{DYNAMIC CLASS NAME}">
Another Text
</div>
</div>
</div>
XPath :
DocumentNode.SelectNodes["//div[#class='info']/div[2]/a"];
How to get a innertext value from nested divs?
Because 3rd div classname is a dynamic.
Thanks.
Using index, like div[2], to get nested <div> is not correct. You should've used div/div instead. Try this way :
DocumentNode.SelectNodes("//div[#class='info']/div[#class='title']/div/a");
I am new to ARIA roles. If I have tool-tip type functionality, i.e. if someone click the question mark button more text is displayed detailing instruction on how to fill in the form field, should I be using the aria-expanded attribute, the aria-hidden attribute or both?
<div class="login-form-field tt-highlight">
<div class="error-message error-style">
<p>Sorry you have not entered anything in the field above.</p>
</div>
<div class="col-xs-10 col-sm-10 col-md-10">
<label for="inputTxtCustomerPostcode" class="login" />Postcode:</label>
<input id="inputTxtCustomerPostcode" type="text" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<a title="Please enter a valid case reference tooltip" class="login-tooltip" data-toggle="collapse" data-parent="#accordion" href="#collapseTxtCustomerPostcode" role="button" aria-pressed="false"></a>
</div>
<div id="collapseTxtCustomerPostcode" class="panel-collapse collapse" role="tree tooltip">
<div class="panel-body" role="treeitem" aria-expanded="false" aria-hidden="true">
<p>some text goes here for the tooltip</p>
</div>
</div>
</div>
Use the RDF model diagram to help:
aria-expanded is defined for the treeitem role via inheritance.
aria-hidden is defined for all roles, but has this caveat:
Note: Authors are advised to avoid using aria-hidden="false" with styles or attributes that have historically prevented rendering in all modalities, such as display:none or visibility:hidden in CSS, or the hidden attribute in HTML 5. At the time of this writing, aria-hidden="false" is known to work inconsistently when used in conjunction with such features. As future implementations improve, use caution and test thoroughly before relying on this approach.
As a result, aria-expanded by itself should suffice.
References
WAI-ARIA Taxonomy
WAI-ARIA RDF Model
aria-expanded
aria-hidden