I have a requirement: I need to add descriptive texts for Radio Buttons as shown below.
It's currently not possible to add such a description under the text of sap.m.RadioButton. However (same as this answer), you can achieve similar behavior, look, and feel in the following combination:
Use sap.m.List with
mode="SingleSelectLeft"
backgroundDesign="Transparent"
showSeparators="None"
In its items aggregation, use a subclass of ListItemBase that supports description / info. Use CustomListItem if nothing suites.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/List",
"sap/m/StandardListItem", // or ObjectListItem, CustomListItem, etc..
], (List, StandardListItem) => new List({
mode: "SingleSelectLeft", // displays radio buttons.
showSeparators: "None", // between items
backgroundDesign: "Transparent",
includeItemInSelection: true,
width: "19rem",
}).addItem(new StandardListItem({
title: "Others",
description: "3rd Party Vendor Lis",
})).placeAt("content")));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-waitForTheme="true"
></script><body class="sapUiBody sapUiSizeCompact" id="content"></body>
Related
The docs say: https://mui.com/components/data-grid/columns/
If the column type is 'actions', you need to provide a getActions
function that returns an array of actions available for each row
(React elements). You can add the showInMenu prop on the returned
React elements to signal the data grid to group these actions inside a
row menu.
{
field: 'actions',
type: 'actions',
getActions: (params: GridRowParams) => [
<GridActionsCellItem icon={...} onClick={...} label="Delete" />,
<GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />,
]
}
How to pass via props onClick handlers?
<DataGrid deleteHandler={...} printHandler={...} />
I'm sorry for stupid question. Of course we can pass handlers in columns prop :))) But I have found even better solution. I don't use calback handlers in action column, but I use component.
getActions: (params: any) => [
<GridActionsCellItem
icon={<OpenIcon />}
label='Open'
component={Link}
to={`/counterparties/${params.id}`}
/>
The docs actually explain how to add handler:
Visit Special properties then scroll down a bit then click Show the full source icon
Basically we need to declare columns inside our functional component where the handler resides, but wrap the columns array using useMemo() to prevent unnecessary rerender.
const columns = React.useMemo(
() => [
{
field: 'actions',
type: 'actions',
width: 80,
getActions: (params) => [
<GridActionsCellItem
icon={<DeleteIcon />}
label="Delete"
onClick={deleteUser(params.id)}
/>,
<GridActionsCellItem
icon={<SecurityIcon />}
label="Toggle Admin"
onClick={toggleAdmin(params.id)}
showInMenu
/>,
<GridActionsCellItem
icon={<FileCopyIcon />}
label="Duplicate User"
onClick={duplicateUser(params.id)}
showInMenu
/>,
],
},
], [deleteUser, toggleAdmin, duplicateUser]);
I need to select only day and month from bootstrap datepicker. I have try viewMode,minViewMode like attributes used but still I am not getting success.
HTML:
<input type="text" class="form-control" name="Date" id="Date" />
JS:
$(document).ready(function () {
$('#Date').datepicker({
//dateFormat: 'dd-mm-yy',
format: 'dd-mm',
viewMode: 'days',
minViewMode: 'days',
orientation: "bottom left",
container: "#date-from-container",
startDate: new Date()
}).on("changeDate", function (e) {
});
});
can you please help me how can do that?
You need maxViewMode instead of minViewMode. startView mentions the mode at which the datepicker is opened. 0-days(default), 1-months, 2-years, 3-decades, 4-centuries.
To be simple,
If you need to configure from a mode use : minViewMode.
If you need to configure to a mode use : maxViewMode.
$.fn.datepicker.dates.en.titleFormat="MM";
$(document).ready(function(){
var date_input=$('input[name="date"]');
date_input.datepicker({
format: 'dd-mm',
autoclose: true,
startView: 1,
maxViewMode: "months",
orientation: "bottom left",
})
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css');
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
color: #b90000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<input name="date">
To update the title format, set
$.fn.datepicker.dates.en.titleFormat="MM";. en denotes English language.
This may vary if a different language is used in the datepicker. Bootstrap supports the language tags specified in IETF.
For tag reference, IETF Language Tag List
In a SAPUI5 application I would like to update the content of a control (e. g. a tile) only when this is currently visible to the user.
I created a function like this:
updatePage: function() {
for (var i = 0; i < this.myTiles.length; i++) {
if (this.myTiles[i].updater) {
this.myTiles[i].updater();
}
}
setTimeout(this.updatePage.bind(this), 10000);
},
.. where the updater is a custom function I added to the tiles that is in charge to update their content.
The problem is: I want to check if the tile is currently visible to the user (i. e. is not in a page or in a tab that is not currently selected, but was rendered previously).
Is there a way to achieve this using object properties? Do I need to manage it manually?
You can utilize jQuery do achieve that.
// determine whether your control is still part of the active DOM
jQuery.contains(document, yourControl.$());
// determine whether your control is visible (in terms of CSS)
yourControl.$().is(':visible');
// combined
MyControl.prototype.isVisible = function() {
return this.$().length && // has rendered at all
jQuery.contains(document, this.$()) && // is part of active DOM
this.$().is(':visible'); // is visible
};
Elements could still be invisible to the user by being:
out of the viewport
visibility: hidden
opacity: 0
...
Also check this answer
BR
Chris
http://api.jquery.com/jQuery.contains/
http://api.jquery.com/visible-selector/
The web API IntersectionObserver is now supported by all major browsers, including Safari.
Basic syntax
const myObserver = new IntersectionObserver(callback/*, settings?*/);
myObserver.observe(domElement);
Demo
Below is a demo with UI5. Run the snippet and try to scroll there. The page title changes depending on the visibility of the target element:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
"sap/ui/core/mvc/Controller",
], async (XMLView, JSONModel, Controller) => {
"use strict";
const control = await XMLView.create({
definition: document.getElementById("myxmlview").textContent,
models: new JSONModel({ "ratio": 0 }),
controller: new (Controller.extend("demo.MyController", {
onInit: function () {
this.intersectionObserver = new IntersectionObserver(entries => {
const targetEl = this.byId("myBox").getDomRef();
const entry = entries.find(entry => entry.target === targetEl);
const model = this.getView().getModel();
model.setProperty("/ratio", entry && entry.intersectionRatio);
});
},
onBeforeRendering: function () {
this.intersectionObserver.disconnect();
},
onAfterRendering: function () {
const targetEl = this.byId("myBox").getDomRef();
this.intersectionObserver.observe(targetEl);
},
onExit: function () {
this.intersectionObserver.disconnect();
this.intersectionObserver = null;
},
}))(),
});
control.placeAt("content");
});
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_horizon"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-compatVersion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitForTheme="init"
></script>
<script id="myxmlview" type="text/xml">
<mvc:View controllerName="demo.MyController"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
displayBlock="true">
<App>
<Page title="Tile visible: {= ${/ratio} > 0}">
<FlexBox renderType="Bare"
height="360vh"
justifyContent="Center"
alignItems="Center">
<core:Icon id="myBox"
src="sap-icon://color-fill"
size="5rem"
color="Critical"/>
</FlexBox>
</Page>
</App>
</mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I am trying to implement sap.ui.unified.Calendarapi and to fetch events month wise. I need events or methods like Next month, previous month, or current visible month. Can anyone help ?
Listener for month and year change is currently unavailable.
I have same query and have raised a token on openui5 github.
you can check it on following link.
https://github.com/SAP/openui5/issues/361
Cheers,
harshal
This is how I use in the onAfterRendering() method
var oView = this.getView();
var oCalendar = oView.byId("usageCalendar");
var calendarHeaderRef = sap.ui.getCore().byId(oCalendar.sId + "--Head");
//to disable prev and next buttons
calendarHeaderRef.setEnabledNext(false);
calendarHeaderRef.setEnabledPrevious(false);
If you would like to listen to the previous and next buttons on the calendar, you can use
calendarHeaderRef.attachPressNext(this.calendarNextMonthPressed);
calendarHeaderRef.attachPressPrevious(this.calendarPrevMonthPressed);
Thanks.
Listening to month / year selection
In sap.ui.unified.Calendar
You can listen to month & year navigation by listening to startDateChange. Here is an example:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/unified/Calendar",
], Calendar => new Calendar({
startDateChange: event => {
const navigatedDate = event.getSource().getStartDate();
const monthYearText = navigatedDate.toLocaleString("default", {
month: "long",
year: "numeric",
});
alert(`Navigating to ${monthYearText}`);
},
}).placeAt("content")))
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
In sap.m.DatePicker
In case of the DatePicker or controls that are derived from it (DateTimePicker, DateRangeSelection, ...), the same event is applied with the event navigate
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/DatePicker", // or DateTimePicker or DateRangeSelection, etc..
], DatePicker => new DatePicker({
width: "17rem",
placeholder: "Select month / year in Calendar -->",
navigate: event => {
if (!event.getParameter("afterPopupOpened")) {
alert("Changing month / year");
}
}
}).placeAt("content")))
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I am using Tiny 4.3.3 for MODx
I need to add a
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.
I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.
Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please?
Thanks
It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)
I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.
Steps to be done, in order to achieve the desired solution:
tell the TinyMCE editor, that your elements are good using the two configuration keywords extended_valid_elements and custom_elements:
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.
create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case editor.css):
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:
plugin code:
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
The editor now looks like this:
and the source like in your example:
First of all you will need to modify the tinymce setting valid_elements and valid_children to your needs (add em to the valid_elements and em as child to the tags desired (probably p) to valid_children).
Second you will need an own plugin with an own drop down or button to insert this code.
You can add one or more tag structures simply using the template plugin.
See documentation
https://www.tiny.cloud/docs/plugins/opensource/template/
See interactive example:
https://codepen.io/gpsblues/pen/WNdLgvb
tinymce.init({
selector: 'textarea#template',
height: 300,
plugins: 'template code',
menubar: 'insert',
toolbar: 'template code',
extended_valid_elements: "emstart[*],emend[*]",
templates : [
{
title: 'emstart/emend',
description: 'Add a personal tag structure with personal tags <emstart></emstart> <emend></emend>.',
content: '<p class="classname"><emstart class="openImg"></emstart>Input text<emend class="closeImg"></emend></p>'
}
],
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px}'
});