I was wondering if it is possible to "transform" a piece of text into a link.
For example:
I have a Label that contains the text: "By accepting our terms and conditions you will be able to access the survey (Read More)"
I would like Read More to be a link so that it's clickable.
Is this possible within a label (or textfield)?
Thanks in advance.
Since you're already using the UI5 framework, you can make use of the available controls that support links within texts such as sap.m.FormattedText or sap.m.MessageStrip with enableFormattedText.
Demo
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/FormattedText",
"sap/m/MessageStrip",
], function(FormattedText, MessageStrip) {
new FormattedText({
htmlText: getFormattedText()
}).addStyleClass("sapUiTinyMargin").placeAt("content");
new MessageStrip({
enableFormattedText: true,
showIcon: true,
text: getFormattedText(),
}).addStyleClass("sapUiTinyMargin").placeAt("content");
function getFormattedText() {
return `By accepting our terms and conditions you will be able to access the survey (Read More)`;
}
}));
<script>
window["sap-ui-config"] = {
libs: "sap.m, sap.ui.core",
preload: "async",
theme: "sap_belize",
compatVersion: "edge",
"xx-waitForTheme": true,
"xx-async": true,
}
</script>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
you can capture the html inside your label and transform it.
As others comment, you can do it for a label but not in a text input field.
assuming jquery in your front end, that would be something like this...
let h = $('label#your-id").html();
h = h.replace('(Read More)','(Read More)');
$('label#your-id').html(h);
or if you want to do it in all of your labels
$('label').each( (i,l) => {
let h = $(l).html();
h = h.replace('(Read More)','(Read More)');
$(l).html(h);
});
You can do this within a label but not an input field.
<form>
<label for="textbox">By accepting our terms and conditions you will be able to access the survey (Read More)</label>
<input type="text" name="textbox"/>
</form>
The best way to handle these kind of scenarios is with Message Strip. Just add:
<MessageStrip id="idMessageStrip" enableFormattedText="true" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom">
<link>
<Link text="Text to be displayed as link goes here" press="handleLinkClick"/>
</link>
</MessageStrip>
Related
I'm using Vue.Js for a survey, which is basically the main part and the purpose of the app. I have problem with the navigation. My prev button doesn't work and next keeps going in circles instead of only going forward to the next question. What I'm trying to accomplish is just to have only one question visible at a time and navigate through them in correct order using next and prev buttons and store the values of each input which I'll later use to calculate the output that will be on the result page, after the survey has been concluded. I've uploaded on fiddle a short sample of my code with only two questions just to showcase the problem. https://jsfiddle.net/cgrwe0u8/
new Vue({
el: '#quizz',
data: {
question1: 'How old are you?',
question2: 'How many times do you workout per week?',
show: true,
answer13: null,
answer10: null
}
})
document.querySelector('#answer13').getAttribute('value');
document.querySelector('#answer10').getAttribute('value');
HTML
<script src="https://unpkg.com/vue"></script>
<div id="quizz" class="question">
<h2 v-if=show>{{ question1 }}</h2>
<input v-if=show type="number" v-model="answer13">
<h2 v-if="!show">{{ question2 }}</h2>
<input v-if="!show" type="number" v-model="answer10">
<br>
<div class='button' id='next'>Next</div>
<div class='button' id='prev'>Prev
</div>
</div>
Thanks in advance!
You should look at making a Vue component that is for a survey question that way you can easily create multiple different questions.
Vue.component('survey-question', {
template: `<div><h2>{{question.text}}</h2><input type="number" v-model="question.answer" /></div>`,
props: ['question']
});
I've updated your code and implemented the next functionality so that you can try and create the prev functionality. Of course you should clean this up a little more. Maybe add a property on the question object so it can set what type the input should be. Stuff like that to make it more re-useable.
https://jsfiddle.net/9rsuwxvL/2/
If you ever have more than 1 of something, try to use an array, and process it with a loop. In this case you don't need a loop, but it's something to remember.
Since you only need to render one question at a time, just use a computed property to find the current question, based on some index. This index will be increased/decreased by the next/previous buttons.
With the code in this format, if you need to add a question, all you have to do is add it to the array.
https://jsfiddle.net/cgrwe0u8/1/
new Vue({
el: '#quizz',
data: {
questions:[
{question:'How old are you?', answer: ''},
{question:'How many times do you workout per week?', answer: ''},
],
index:0
},
computed:{
currentQuestion(){
return this.questions[this.index]
}
},
methods:{
next(){
if(this.index + 1 == this.questions.length)
this.index = 0;
else
this.index++;
},
previous(){
if(this.index - 1 < 0)
this.index = this.questions.length - 1;
else
this.index--;
}
}
})
For my project I want different pop-ups for different useage. So I created a new css class. Now I want to change the style of the title component (as shown below) on the same way as I changed the buttons.
So my question is: can I change the css of the title the same way as I change the css of the buttons? With the className property. Also, how should I do that?
bootbox.dialog({
message: "<h4>" + errorMessage + "<h4>",
title: $filter("translate")("Warning"),
buttons: {
no: {
label: $filter("translate")("Cancel"),
className: "c-btn-declined-selection c-btn-global-warning",
callback: noCallback
},
yes: {
label: $filter("translate")("Confirm"),
className: "c-btn-confirm-selection c-btn-global-warning",
callback: yesCallback
}
}
From reading the Bootbox.js documentation, it seems that an inherent title-styling method doesn't exist. This leaves you with two options...
1. Add the style/class in-line:
bootbox.dialog({
//...
title: "<span style='color: red;'>This title is red</span>",
//...
})
bootbox.dialog({
//...
title: "<span class="redText">This title is red</span>",
//...
})
2. Manipulate the generated elements manually
Right click your Bootbox dialog on the page and go to Inspect Element. From here you'll see the generated content, including classes and elements, from which you can just use some basic CSS rules to style them.
For example, if the pop-up HTML looked like this...
<div class='bootbox-popup'>
<h4 class='popup-title'></h4>
<div class='popup-body'> ... </div>
</div>
You could style it using something like:
h4.popup-title {
color: red;
}
i am trying to implement ckeditor's inline editing for first time,i have gone through documentations and solutions but i haven't found any solution for my issue.
the content of the div tag that i am modifying does not have a unique id ,actually its generated at run time like this
<%
for(Section subSection:subSections) {
%>
<div class="editable" id="contact<%=subSection.getSectionId()%>" contenteditable="true">
<content goes here that also comes from db>
</div>
<%}%>
i am able to show the current selected content using on click of save button like this
CKEDITOR.plugins.registered['save'] = {
init: function (editor) {
var command = editor.addCommand('save',
{
modes: { wysiwyg: 1, source: 1 },
exec: function (editor) { // Add here custom function for the save button
console.log(editor.getData());
}
});
editor.ui.addButton('Save', { label: 'Save', command: 'save' });
}
}
but i need the value of Id attribute also of currently selected div which i am not sure how to get.
i was able to do this in tinymce with var div_id = tinymce.activeEditor.id;if that helps in anyway.
It's editor.element.getId(). Use it in your command's exec method. Read more about CKEDITOR.editor#element.
I am looking for some code which would add a dropdown to my WYSIWYG fields in the WordPress backend through which I would be able to choose an inline line-height for the selected text. I find the tinyMCE documentation very confusing. Additionally it is mostly aimed at TM 3, but WP 3.9 uses the fourth version…
My tinyMCE Plugin looks something like this:
tinymce.PluginManager.add('ad_lineheight', function(editor, url) {
…
editor.addButton('ad_lineheight', {
type: 'splitbutton',
text: 'line-height',
icon: false,
menu: menuval
});
});
How would you integrate the function, which adds inline-styles to the selected input, like so <span style="line-height: 120%; display: inline-block;">selected text</span>?
EDIT: I already managed to add the dropdown to the editor, it shows the line-heights I defined programmatically like 80%, 90%, 100% and so on.
EDIT2: With this code I am able to change the line-height:
editor.addCommand('lineHeight', function(com, value) {
var selected = tinyMCE.activeEditor.selection.getContent();
var content = '<span style="line-height: '+value+';">' + (selected != '' ? selected : '') + '</span>';
editor.execCommand('mceInsertContent', false, content);
});
editor.addButton('lineheightselect', function() {
…
…
return {
type: 'listbox',
text: 'line-height',
tooltip: 'line-height',
values: items,
fixedWidth: true,
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('lineHeight', false, e.control.settings.value);
}
}
};
});
But it is not very practical as it ignores inline-styles that are already there leading to code like this:
<span class="h3" style="font-size: 90%;"><span style="line-height: 160%;">AND</span></span>
this is an old question but I am adding the answer here just in case anyone still need it.
you can use getNode() instead of getContent()
you command code will be
editor.addCommand('lineHeight', function(com, value) {
var node = tinyMCE.activeEditor.selection.getNode();
$(node).css('line-height', value);
});
You need to add custom button to TinyMCE editor, you need also to create your style in some CSS stylesheet. Maybe some WP function may be needed. I don't think you will need adding anything in JS - there is already possibility to add custom style button in TinyMCE and you could achieve that using PHP.
http://codex.wordpress.org/TinyMCE_Custom_Buttons
http://codex.wordpress.org/TinyMCE_Custom_Styles
I have created one Html for ms crm 2011, this is in English language.But i want to show the same html in other languages(Arabic,Spanish..etc ) for some users, how i can achieve this,is there any traslating api ?
Unfortunately there are not translating API. All you can do is to create a separated webresource for every language you want to support and show webresource based on the language of current user.
No OOB functionality exists unfortunately, but it's not as hard as it seems to implement in JS.
All you need is a container with your labels, CRM can tell you the user's language. The script would look like this (taken right out of a working project, which also leverages jQuery ... if you don't, just add it as webresource and include in your HTML page):
(function (pageCode, $, undefined) {
var labels = {
1033: {
element1: 'english label for element1',
element2: 'eng label for element2'
},
1040: {
element1: 'italian label for element1',
element2: 'italian label for element2'
},
xxxx: {
element1: 'xxxx language label for element1',
element2: 'xxxx language label for element2'
}
}
pageCode.performTranslation = function() {
var langCode = Xrm.Page.context.getUserLcid();
if (typeof (locLabels[langCode]) == 'undefined') {
// You don't have labels for this language... let's go English
langCode = 1033;
}
for (var ctrlName in locLabels[langCode]) {
$('#' + ctrlName).text(locLabels[langCode][ctrlName]);
}
}
}(window.pageCode = window.pageQuote || {}, jQuery));
$(function(){
pageCode.performTranslation();
});
You'll need to include ClientGlobalContext.js.aspx in your web resource so you have access to Xrm, and change what your HTML code looks like in this fashion:
If your HTML is now
<label>This is a label</label>
<label>This is another label</label>
You should give an id to all the translated elements, and the code should become
<label id="element1"></label>
<label id="element2"></label>
Note that you no longer need to fill the text in the HTML (the JS will take care of it!).