SAPUI5 - How do I disable text input in DateRangeSelection - datepicker

I need to completely disable text entry on a DateRangeSelection, so that only the calendar selection can be accepted..
I can the disable text input for a DatePicker component with...
view.byId("__reportDate")._bMobile = true;
Unfortunately this doesn't work for a DateRangeSelection.
Is there anything else I can try?

There does not seem to be a standard property to do it, you can however tweak the underlying input element used to set it to readonly. This would disable any text input in the field. This might be one of the ways to do it.
var oDateSel = this.getView().byId("dateSel");
$("#"+oDateSel.sId+" input").prop("readonly",true);
Note: This is certainly not a standard approach according to the UI5 standards. Also you might have to set a handler to set the element to readonly if the control is re-rendered.

Solution was...
var dateSel = sap.ui.getCore().byId("dateRange");
$("#"+dateSel.sId+" input").prop("disabled",true);
(readonly wiped out the placeholder in IE).

Related

Does the Office.js API support multiple range selection?

I need to select multiple ranges simultaneously via the Office.js API like you can do in the MSWord UI by holding down the CTRL key and highlight multiple non-contiguous paragraphs, like the screenshot below:
This attempt doesn't work. Rather than highlighting the first two instances of the word "the" in the document, it's highlighting the first, then highlight the second afterwards:
Word.run(function (context) {
// Set up the search options.
var options = Word.SearchOptions.newObject(context);
options.matchCase = false;
options.ignoreSpace = true;
options.ignorePunct = true;
options.matchWildcards = true;
var searchText = "the";
var searchResults = context.document.body.search(searchText, options);
context.load(searchResults);
return context.sync().then(function () {
searchResults.items[0].select();
searchResults.items[1].select();
});
});
No, none of the APIs support multiple selections. Even the ability for the user to do so, using Ctrl+select is relatively new. The capability was never carried over to the APIs.
The closest the APIs can do is to highlight (or otherwise format) the Range objects of interest. There is such functionality in Word's dialog box which is also available to the COM APIs, but I don't find an equivalent for the JS APIs...
To confirm what Cindy mentioned, Non-continuous selections are not only not supported in Office.js (for Word, we DO support them for Excel though) but also not supported manually on other platforms (i.e. Word Online).
It might be possible.
I ran across an odd result when using bindings and Office.context.document.goToByIdAsync(). Using this function you can navigate to any binding without having to call Word.Run(), which is nice. There is an option called SelectionMode, which by default does not select the binding, but can be set to select the contents of the binding. Weirdly, selecting the content in this way does not deselect the current selection! Which is not the result I wanted, fwiw; to me it is a nuisance that requires me to "deselect" any current selection before I use goToByIdAsync. But it's possible you could use this to select multiple ranges by wrapping them in contentControls and then creating bindings on them, then calling goToByIdAsync (with SelectionMode set to Select) on each binding. I have not tested this.
Edit
Actually, the previous selection is deselected, but it remains highlighted as though it is still selected. This appears to be a display bug.

Mask input for sap.m.Date(Time)Picker

With the sap.m.DateTimePicker, it's possible for a user to either select a value from the drop-down list or enter it manually. I'm wondering if there's a way to add a mask to the manual input box that matches the valueFormat of the DateTimePicker.
I know there's a sap.m.MaskInput as well, so maybe there's a way to combine the two elements.
There is a new private module named sap.m.MaskEnabler which the sap.m.InputBase (i.e. DateTimePicker) is supposed to make use of.
(MaskEnabler) should be applied to the prototype of a sap.m.InputBase.
The mask feature is currently enabled only in sap.m.TimePicker (v1.54). According to this commit message, however, the same feature will arrive to the Date(Time)Picker as well:
This change prepares for refactoring of DatePicker and TimePicker so the
common code of both pickers can be moved to a new common control that
they may extend.
Therefore, if it's not urgent, and depending on your project, I'd not create a new custom control and then throw it away once the mask feature has arrived.
I'll update my answer when it's available.
Until then (and even afterwards), you can still guide the user to enter the data in the correct format via OData binding type sap.ui.model.odata.type.DateTime:
<DateTimePicker
value="{
path: 'myODataModel>myDateTime',
type: 'sap.ui.model.odata.type.DateTime',
constraints: {
isDateOnly: true,
displayFormat: 'Date'
}
}"
minDate="{...}"
maxDate="{...}"
/>
In contrast to formatter, type allows us to keep two-way data binding.
The entered value is automatically intercepted from updating the model data when...
It could not be parsed due to an invalid format (fires parseError)
It could be parsed but the constraints were violated (fires validationError)
If you enable handling UI messages
additionally, the framework will then take care of creating the appropriate
message for the user:
Example: https://stackoverflow.com/a/48482544
I think the only way to combine the two sap.m.DateTimePicker and sap.m.MaskInput is to develop your own control . Documentation : https://sapui5.hana.ondemand.com/#/topic/91f1703b6f4d1014b6dd926db0e91070.
Another way is to just use the Placeholder of the DateTimePicker Input field. This does not provide the same functionality as a MaskInput, but helps the user which valueFormat is expected in the input when entering it manually.
If you have a binding in your input box, you could set the type in the binding to eg. sap.ui.model.type.Date. This way you get some automatic formatting when field validation is triggered. There are other types available and you could inherit from sap.ui.model.SimpleType to code your own.

Drupal 7 - Hide certain form fields of a content edit form depending on the content data

In Drupal 7, is there a way to change the standard edit form for a content type based on a certain content?
For example:
I have a content type with a checkbox...once it it checked and the form is saved, I do not want this checkbox to be visible anymore...therefore based on the checkboxes value in the Database I want to hide form fields when showing the form.
I am building a small specific project site, where a company wants to add projects, and their customers are supposed to follow certain steps (upload some content, provide information etc.), and also should be able to check off certain requirements, and once these are checked off, they should not be visible/editable to them.
Also the displayed form fields should depend on an user's role, and then FURTHER be limited depending on the content's database entries.
Is there a module, which could achieve this behaviour? "rules" and "field/permissions" come close to what I need, but are not sufficient. Or did I just miss the option to change a form field's accessibility based on conditions?
What I need is some place to define a logic like "IF (VALUEOF(CHECKBOX_1) == TRUE) THEN DO_NOT_SHOW(CHECKBOX_1)"
hook_form_alter is the way to do this, as explained by Mihaela, but what options do you have inside that function?
If you want just to disable field (it will be visible, but user can't change it) you can do it like this:
$form['field_myfield']['#disabled'] = TRUE;
And if you want it to be hidden, but to keep value it has before editing the way to do that is:
$form['field_myfield']['#access'] = FALSE;
I.e. hiding it (somewhere I saw someone suggesting that):
hide($form['field_myfield']);
really hides the field, but after that, when form is saved this field has empty value, validation fails, etc, so that's not a good way to do this. Hiding makes sense only if you want to print separately that field later, at some other place.
function your_module_form_alter(&$form, &$form_state, $form_id){
switch($form_id) {
case 'nameOfTheNode_node_form':
//your code here. check the value from from_state.
break;
}
}
In this case, I use module Conditional Fields https://www.drupal.org/project/conditional_fields
For example: If my Dependees field has a value, Dependent field can be visible/invisible, enabled/disabled, required/optional, checked/unchecked

CKEditor automatically strips classes from div

I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});

How do I set the maskededitvalidator MinimumValue property to today?

I am using an AJAX Control Toolkit: 'maskededitvalidator' to validate a textboxe's date entry. I am trying to set the minimum value programatically to today's date. I have tried both adding it to the source (and calling Page.DataBind()) or setting it in the code behind and niether work. No error, just the validation does not work. If I change the 'MinimumValue' property to a hardcoded value it works just fine. Any ideas? Thanks!
In the source directly on the control:
MinimumValue='<%# DateTime.Now.Date.ToString %>'
In the server code:
Me.txtDateMEV.MinimumValue = DateTime.Now.ToShortDateString()
I think this is more likely a "calendar" issue than a "maskedit" one.
Maybe you should try some Calendar option just like the example on Calendar Example. Check out the Calendar with date range, it looks like the problem you have.
I was never able to get the binding systax working in the source, but I did get it working in the code behind like below:
Me.txtDateMEV.MinimumValue = DateTime.Now.ToShortDateString()
I had a CSS style which was erasing the current date if it was left blank and did not have a default date set. Once I updated the CSS not to set 'display:none' for the .AJAXCalendar .ajax__calendar_today style, then the code above worked. So half fixed my issue because CSS was preventing the MinimumValue code to apply. However I really wanted to be able to use the binding syntax but I could never get it to work.