ATK4 Form datePicker - default state is 'opened', can this be changed? - jquery-ui-datepicker

I'm using the following form, and everytime the page opens (it's in an expander on a grid) the datePicker is 'open', obscuring part of the text above it.
function page_del() {
$billingid = $_GET['id'];
$now = date("Y-m-d H:i:s");
$q = $this->api->db->dsql()
->table('billing')
->where('id', $billingid)
->field('enddate')
->getOne();
if (!$q) {
$this->add('H5')->set('Are you sure you want to stop billing this item?');
$form = $this->add('Form');
$form->addField('hidden','billingid')->set($billingid);
$form->addField('datePicker','datum')->set($now);
$form->addSubmit('Confirm');
if ($form->isSubmitted()) {
$form->stopBilling('manual', $form, $now);
$this->js()->univ()->getjQuery()->trigger('reload_grid')->execute();
}
} else {
$this->add('H5')->set('This product has already been stopped, effective date: ' .$q);
}
}
}
I have other forms elsewhere that also have a datePicker as their first (visible) field that do not display this behaviour. I only mention it because it looks like a 'focus' issue? I.e. the first field gets focus?
Any thoughts on what causes this or how it can be remedied?

Actually it is field state "onfocus", not default. Your form has only one field and this (first) field is selected on page load.
This behavior is added here:
https://github.com/atk4/atk4/blob/master/lib/Form/Field/DatePicker.php#L35
function addCalendarIcon() {
$this->addButton('',array('options'=>array('text'=>false)))
->setHtml(' ')
->setIcon('ui-icon-calendar')
->js('click',$this->js()->datepicker('show'));
$this->js('focus', $this->js()->datepicker('show'));
}
You can redefine this method in your project and remove line
$this->js('focus', $this->js()->datepicker('show'));

Related

APEX row selector part 2

This is a follow on to "APEX row selector" posted 5 days ago.
The problem was collecting multiple values from an interactive grid. From the excellent links to post supplied I was able to achieve this. However, the next part of the project is to open an edit dialog page and update multiple values.
I added this code to the attribute of the interactive grid:
function (config)
{
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
toolbarGroup.controls.push(
{
type: "BUTTON",
action: "updateCar",
label: "Edit Selected Cars",
hot: true,
});
config.toolbarData = toolbarData;
config.initActions = function (actions)
{
// Defining the action for activate button
actions.add(
{
name: "updateCar",
label: "Edit Selected Cars",
action: updateCar
});
}
function updateCar(event, focusElement)
{
var i, records, model, record,
view = apex.region("ig_car").widget().interactiveGrid("getCurrentView");
var vid = "";
model = view.model;
records = view.getSelectedRecords();
if (records.length > 0)
{
for (i = 0; i < records.length; i++)
{
record = records[i];
alert("Under Development " + record[1]);
vid = vid + record[1] + "||";
apex.item("P18_CAR").setValue(vid);
// need to open next page here and pass parameters
}
}
}
return config;
}
I need to know how to open a form and have the parameter values available to pass to an oracle update script.
Thank you for any help you can provide. I did find some posts but I really need a good example. I have tried everything to no avail.
There are various ways you could do this. Here's one way, perhaps someone else will offer a more efficient option.
The JavaScript options for navigation in APEX are documented here:
https://docs.oracle.com/en/database/oracle/application-express/19.1/aexjs/apex.navigation.html
Since you're trying to open a separate page, you probably want to use apex.navigation.dialog, which is what APEX automatically uses when opening modal pages from reports, buttons, etc.
However, as noted in the doc, the URL for the navigation must be generated server-side for security purposes. You need a dynamic URL (one not known when the page renders), so you'll need a workaround to generate it. Once you have the URL, navigating to it is easy. So how do you get the URL? Ajax.
Create an Ajax process to generate the URL
Under the processing tab of the report/grid page, right-click Ajax Callback and select Create Process.
Set Name to GET_FORM_URL.
Set PL/SQL code to the following
code:
declare
l_url varchar2(512);
begin
l_url := apex_page.get_url(
p_application => :APP_ID,
p_page => 3,
p_items => 'P3_ITEM_NAME',
p_values => apex_application.g_x01
);
apex_json.open_object();
apex_json.write('url', l_url);
apex_json.close_object();
end;
Note that I'm using apex_item.get_url to get the URL, this is an alternative to apex_util.prepare_url. I'm also using apex_json to emit JSON for the response to the client.
Also, the reference to apex_application.g_x01 is important, as this will contain the selected values from the calling page. You'll see how this was set in the next step.
Open the URL with JavaScript
Enter the following code in the Function and Global Variable Declaration attribute of the calling page:
function openFormPage(ids) {
apex.server.process(
'GET_FORM_URL',
{
x01: ids.join(':')
},
{
success: function (data) {
var funcBody = data.url.replace(/^"javascript:/, '').replace(/\"$/,'');
new Function(funcBody).call(window);
},
error: function (jqXHR, textStatus, errorThrown) {
console.error(errorThrown);
// handle error
}
}
);
}
In this case, I'm using apex.server.process to call the server-side PL/SQL process. Note that I'm passing the value of ids.join(':') to x01. That value will become accessible in the PL/SQL code as apex_application.g_x01. You can use additional items, or you can pass a colon-delimited string of values to just one item (as I'm doing).
The URL that's returned to the client will not be a standard URL, it will be a JavaScript snippet that includes the URL. You'll need to remove the leading and trailing parts and use what's left to generate a dynamic function in JavaScript.
This is generally frowned upon, but I believe it's safe enough in this context since I know I can trust that the response from the process call is not malicious JavaScript code.
Add a security check!!!
Because you're creating a dynamic way to generate URLs to open page 3 (or whatever page you're targeting), you need to ensure that the modal page is protected. On that page, create a Before Header process that validates the value of P3_ITEM_NAME. If the user isn't supposed to be able to access those values, then throw an exception.

How to add form alter hook in drupal 8

I am very much new to drupal 8, I am trying to alter a form under custom content type "Question". The form has an id "node-question-form".
I have setup a module and trying to add hook_FORM_ID_alter() but its never getting called. Even the simplest hook is not working. eg:
function constellator_form_alter(&$form, &$form_state, $form_id){
echo "alter the form"; exit;
}
where 'constellator' is the module name.
I have been stuck with since morning and nothing is working for me, Any help will be greatly appriciated.
Cheers
hook_form_alter() and hook_FORM_ID_alter() are called while a form is being created and before displaying it on the screen.
These functions are written in the .module file.
Always clear the cache after writing any hook function. This makes Drupal understand that such a function has been declared.
Use drush cr if using drush version 8 else click on Manage->Drupal 8 logo->Flush all Caches to clear the caches.
Now you can check if the function is being called or not.
The best way to check that is to install the Devel module, enable it. Along with Devel, Kint is installed. Enable Kint too from the Admin UI.
After doing that,you can check whether the hook is being called or not in the following way:
function constellator_form_alter(&$form, &$form_state, $form_id){
kint($form);
}
This will print all the form variables for all forms in the page.
If you want to target a particular form in the page, for eg. you form, node-question-form, type:
function node_question_form_form_alter(&$form, &$form_state, $form_id){
kint($form);
}
Using echo, the way you did, you can confirm whether the function is being called or not, without any hassle, by viewing the Source Code for the page and then searching for the text that you have echoed, using some search option of browser, like, Ctrl+f in case of Google Chrome.
If you want to change sorting options and/or direction (ASC / DESC), you can use this example (tested with Drupal 9).
Here I force the sorting direction according to the "sort by option" set by the user in an exposed filter. (if the user want to sort by relevance, we set the order to ASC, if the user want to sort by date, we set the order to DESC to have the latest content first).
/**
* Force sorting direction for search by date
*
*/
function MYTHEME_form_alter(&$form, &$form_state, $form_id)
{
if (!$form_id == 'views_exposed_form"' || !$form['#id'] == 'views-exposed-form-search-custom-page-1') {
return;
}
$user_input = $form_state->getUserInput();
if (empty($user_input['sort_by'])) {
return;
}
if ($user_input['sort_by'] == 'relevance') {
$user_input['sort_order'] = 'ASC';
} elseif ($user_input['sort_by'] == 'created') {
$user_input['sort_order'] = 'DESC';
}
$form_state->setUserInput($user_input);
}
Note that "views-exposed-form-search-custom-page-1" is the id of my form,
"relevance" and "created" are the sort field identifier set in drupal admin.
function hook_form_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id) {
echo 'inside form alter';
}

How to make Date Editable while using Glass mapper

Today i am facing one issue which has following requirement.
Date should be Editable.
Date should be in particular format.
My Code is like below which is not working.
foreach(var item in Model)
{
<div>#Editable(item, x => x.Start_Date.ToString("MMMM dd,yyyy"))</div>
}
I have tried following approach but throwing "DateParameters" namespace error.
#Editable(item, x=> x.Start_Date, new DateParameters { Format = "MMMM dd,yyyy"})
Also i have learner following thing but how can i achieve this ?
To make a field editable takes two parameters, this has been used to make the Date field editable. The first parameter instructs Glass.Mapper which field to make editable, the second parameter then specifies what the output should be when the page is not in page editing mode. This allows you to control the output of the field when in the two different modes.
Can anybody help me ?
For Experience editor mode, this works for me in razor view:
#Editable(model => model.SomeDateField, new { Format = "dd-MM-yyyy" })
Sitecore 8.2 though, with Glass 4.4.
What you want to do is to provide the default format but keep things the same for the main glass stuff. Like so:
foreach(var item in Model)
{
<div>#Editable(item, x => x.Start_Date, x=>x.Start_Date.ToString("MMMM dd,yyyy"))</div>
}
This will make the date a normal date when editing, but allow you to format it for the final page.
Usually in this case i use different code for "Normal View" and "Experience Editor", so for normal view you need only to display the date with format without making it editable, and on experience editor you need only to edit the date field the author will not care about the date format with experience editor, so your code will be like this :
foreach(var item in Model)
{
{
#if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<div>#Editable(item, x => x.Start_Date)</div>
}
else
{
<div>#item.Start_Date.ToString("MMMM dd,yyyy")</div>
}
}
}
I have tried that as well but it is throwing an error like below
**Value cannot be null. Parameter name: objectToSwitchTo
at Sitecore.Diagnostics.Assert.ArgumentNotNull(Object argument, String argumentName)
at Sitecore.Common.Switcher2.Enter(TValue objectToSwitchTo)
at Glass.Mapper.Sc.GlassHtml.MakeEditable[T](Expression1 field, Expression1 standardOutput, T model, Object parameters, Context context, Database database, TextWriter writer)**
Any help on this ?

Scout Eclipse check for dirty fields

When you try to close Swing application and you change same value in field, application ask you if you want to save changes.
My first question is why RAP application doesn't ask same question ?
Second and more important question is how to force validation of fields change and how to manipulate this.
for example :
I have table with rows and some fields below table. If I click on row some value is entered in fields. I can change this value and click button save.
I would like to force change validation on row click. So if changes ware applied and if I click on row, application should warn me that some changes are not saved.
But I should be able to manipulate what is change and what is not. For example if table on row click fill some data if fields this is not change, but if I entered value is same fields this is change.
I discovered method
checkSaveNeeded();
But it does nothing. (if I change values or not)
I see that every field has mathod
#Override
public final void checkSaveNeeded() {
if (isInitialized()) {
try {
propertySupport.setPropertyBool(PROP_SAVE_NEEDED, m_touched || execIsSaveNeeded());
}
catch (ProcessingException e) {
SERVICES.getService(IExceptionHandlerService.class).handleException(e);
}
}
}
so I should manipulate changes throw m_touched ?
How is this handled in Scout ?
ADD
I am looking for function that check for dirty fields and pops up message dialog, same as when closing form, and way to set fields dirty or not.
I look here and here, but all it describes is how values is stored for popup messages and dot how to fire this messages (validation).
My first question is why RAP application doesn't ask same question ?
I am not sure to know which message box you mean but it should be the case.
There are several questions about unsaved changes and form lifecycle in the Eclipse Scout Forum. I think you can find them with Google.
I have also taken the time to start to document it in the Eclipse Wiki:
Scout Field > Contribution to unsaved changes
Form lifecycle
I think you should implement execIsSaveNeeded() in the corresponding field. The default implementation in AbstractTableField uses the state of the rows, but you can imagine the logic you want.
#Order(10.0)
public class MyTableField extends AbstractTableField<MyTableField.Table> {
#Override
protected boolean execIsSaveNeeded() throws ProcessingException {
boolean result;
//some logic that computes if the table field contains modification (result = true) or not (result = false)
return result;
}
//...
I hope this helps.
I am looking for function that check for dirty fields and pops up message dialog, same as when closing form.
Are you speaking from this message box that appears when the user clicks on Cancel in the form?
There is no specific function that you can call for that. But you can check the beginning of the AbstractForm.doCancel() function. It is exactly what you are looking for.
I have rewritten it like this:
// ensure all fields have the right save-needed-state
checkSaveNeeded();
// find any fields that needs save
AbstractCollectingFieldVisitor<IFormField> collector = new AbstractCollectingFieldVisitor<IFormField>() {
#Override
public boolean visitField(IFormField field, int level, int fieldIndex) {
if (field instanceof IValueField && field.isSaveNeeded()) {
collect(field);
}
return true;
}
};
SomeTestForm.this.visitFields(collector);
MessageBox.showOkMessage("DEBUG", "You have " + collector.getCollectionCount() + " fields containing a change in your form", null);
I have changed the Visitor to collect all value fields with unchanged changes. But you can stick to the original visitField(..) implementation. You cannot use P_AbstractCollectingFieldVisitor because it is private, but you can have a similar field visitor somewhere else.
I am looking for a way to set fields dirty or not.
As I told you: execIsSaveNeeded() in each field for some custom logic. You can also call touch() / markSaved() on a field to indicate that it contains modifications or not. But unless you cannot do otherwise, I do not think that this is the correct approach for you.

Set queryable source on Rendering Parameter Template field

I have a Rendering Parameter template applied to a sublayout. It has a single Droptree field on it, and I want to set the Source of that field to a Sitecore query so I can limit the options available for that field.
Source can be:
query:./*
or
query:./ancestor-or-self::*[##templatename='MyTemplate']/
The query just needs to grab items relative to the content item that we're on. This normally works with Droptree fields in the content editor.
However I'm finding that the query isn't working here because we're in the rendering parameters, so it's not using the content item as it's context.
The query fails and I just get the full Sitecore tree.
I found this can be fixed up for the Datasource field with 'Queryable Datasource Locations' at this link:-
http://www.cognifide.com/blogs/sitecore/reduce-multisite-chaos-with-sitecore-queries/
However I don't know where to start to get this working for other rendering parameter fields.
Any ideas? (I'm using Sitecore 6.6 Update 5)
Unfortunately, the pipeline mentioned in Adam Najmanowicz's answer works for some other types, like Droplink and Multilist, but the pipeline isn't run for Droptree fields.
After looking into this deeper I found that the Source of a Droptree field IS using the wrong context item, as Adam mentioned, but the code comes from the Droptree field itself:-
Sitecore.Shell.Applications.ContentEditor.Tree, Sitecore.Kernel
Utilising the query string code from Adam's answer, we can create a 'fixed' Droptree custom field, that is almost the same as the regular Droptree but will use the correct context item instead.
The code will inherit from the normal Tree control, and only change the way that the Source property is set.
public class QueryableTree : Sitecore.Shell.Applications.ContentEditor.Tree
{
// override the Source property from the base class
public new string Source
{
get
{
return StringUtil.GetString(new string[]
{
base.Source // slightly altered from the original
});
}
set
{
Assert.ArgumentNotNull(value, "value");
if (!value.StartsWith("query:", StringComparison.InvariantCulture))
{
base.Source = value; // slightly altered from the original
return;
}
Item item = Client.ContentDatabase.GetItem(this.ItemID);
// Added code that figures out if we're looking at rendering parameters,
// and if so, figures out what the context item actually is.
string url = WebUtil.GetQueryString();
if (!string.IsNullOrWhiteSpace(url) && url.Contains("hdl"))
{
FieldEditorParameters parameters = FieldEditorOptions.Parse(new UrlString(url)).Parameters;
var currentItemId = parameters["contentitem"];
if (!string.IsNullOrEmpty(currentItemId))
{
Sitecore.Data.ItemUri contentItemUri = new Sitecore.Data.ItemUri(currentItemId);
item = Sitecore.Data.Database.GetItem(contentItemUri);
}
}
if (item == null)
{
return;
}
Item item2 = item.Axes.SelectSingleItem(value.Substring("query:".Length));
if (item2 == null)
{
return;
}
base.Source = item2.ID.ToString(); // slightly altered from the original
}
}
The above code is pretty much the same as the Source property on the base Tree field, except that we figure out the proper context item from the URL if we've detected that we're in the rendering parameters dialog.
To create the custom field, you just need to edit the Web.Config file as described here. Then add the custom field to the core database as described here.
This means that parameters can now have queries for their source, allowing us to limit the available items to the content editor. (Useful for multi-site solutions).
The key here would be to set the Field Editor's context to be relative to the item you are editing instead of the Rendering parameters (that I think it has by default).
So you could have processor:
public class ResolveRelativeQuerySource
{
public void Process(GetLookupSourceItemsArgs args)
{
Assert.IsNotNull(args, "args");
if (!args.Source.StartsWith("query:"))
return;
Item contextItem = null;
string url = WebUtil.GetQueryString();
if (!string.IsNullOrWhiteSpace(url) && url.Contains("hdl"))
{
FieldEditorParameters parameters = FieldEditorOptions.Parse(new UrlString(url)).Parameters;
var currentItemId = parameters["contentitem"];
if (!string.IsNullOrEmpty(currentItemId))
{
Sitecore.Data.ItemUri contentItemUri = new Sitecore.Data.ItemUri(currentItemId);
contextItem = Sitecore.Data.Database.GetItem(contentItemUri);
}
}
else
{
contextItem = args.Item;
}
}
}
hooked as:
<sitecore>
<pipelines>
<getLookupSourceItems>
<processor patch:before="*[#type='Sitecore.Pipelines.GetLookupSourceItems.ProcessQuerySource, Sitecore.Kernel']"
type="Cognifide.SiteCore.Logic.Processors.ResolveRelativeQuerySource, Cognifide.SiteCore" />
</getLookupSourceItems>
</pipelines>
</sitecore>
Together with ResolveQueryableDatasources from Przemek's blog this should solve your problem.