nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Date Validation in Aikau widget

anshu_kumar

Hello Guys,

I have a very basic requirement for which I am using Aikau widgets to develop.
The requirement is to have a form based selection of 'FROM' and 'To' dates. I am able to populate the Date textbox using "alfresco/forms/controls/DateTextBox" widget. However, I need to put a validation in which 'from' date should always be less than 'to'. Can someone help me achieve this. Thanks. Below is the piece of code that shows the dates selection.

<javascript>
var date = new Date();
var todayDate = date.toISOString();

model.jsonModel = {

    widgets: [
   {
      id: "FROM_DATE",
      name: "alfresco/forms/controls/DateTextBox",
      config:   {
         label: "FROM",
         name: "fromDate",
         value: todayDate
      }
    },
   {
      id: "TO_DATE",
      name: "alfresco/forms/controls/DateTextBox",
      config:   {
         label: "TO",
         name: "toDate",
         value: todayDate
      }
    }
]};
</javascript>

Find more posts tagged with

Comments

ddraper

It is possible to configure a variety of validation behaviours for form controls, but at the time of writing (when the latest release of Aikau is version 1.0.85) it is not possible to achieve what you require ... if you're reading this at any point onwards from Sept 15th 2016 then you might want to check what is available in later releases!

Ideally we would actually have some kind of range picker available in Aikau out-of-the-box for you to use and in the future we may have one. However, for the time being I think that your best option is to extend the existing DateTextBox widget and add an additional validator function that you can reference in your "validationConfig" for each form.

The approach I would take would be to extend the postMixInProperties function to create a subscription to the changes in value of the other date fields (I would make this a configurable option) to keep track of the value of that field and then add a validator function that ensures that the field is before or after the date value of the other field.

This commit to the Password widget shows how this approach might be made (this commit added the ability to confirm that one password field matched another, in your case you'd want to confirm that one Date was before or after another).

Hopefully that makes, sense - please reply if you need more information.

ddraper

FYI: I've just implemented a DateRange widget which will be available from the 1.0.91 Aikau release... see this pull request: AKU-1014: Added DateRange widget mapping by draperd · Pull Request #1255 · Alfresco/Aikau · GitHub

tansadio

Hi Dave Draper

I have some issue with DateTextBox. When i use chrome inspect code, i don't arrive to get value DateTexBox.

Please, can you explain me, how i get value DateTextBox widget aikau?

Thanks !

ddraper

I don't quite understand the question... what exactly are you trying to do?

If you want to get the value of a DateBox programmatically then you can call the getValue() function, however you would normally expect to use the DateTextBox in a Form and it's value would automatically be included in the payload published when submitting the form.

If you're trying to find the code to get the value in the DateTextBox source then you won't it directly as all form controls inherit from the BaseFormControl widget so quite a lot of the form control functionality is defined there (or in the associated modules that are also mixed into it).

If you're looking to find the source of DateTextBox itself in the Chrome inspector then you won't find it as a single resource because Surf aggregates all of the widgets source files together into a single resource to reduce HTTP handshaking. The fastest way to get to this source file is to use CTRL-P within the inspector and type "surf" - the first result is usually the Aikay source file - you'd be able to find the DateTextBox source within it.

tansadio

Thanks for your reply.

For example, I have Two widgets DateTextBox and my question is how i get widget value filterDateFrom in filterDateTo ?

/* Found in pages folder*/

var filterDateFrom = {

config: {

fieldId: "INVOICE_DATE_FROM",

value: "2016-01-01",

label: "title.invoiceDateFrom",

description: "label.description.from",

}

};

var filterDateTo = {

config: {

fieldId: "INVOICE_DATE_TO",

value: "2016-12-31",

label: "title.invoiceDateTo",

description: "label.description.to",

}

};

model.jsonModel = {

services: [

// Here module services

]

Widgets:[

//Here my widget

]

}

/* Found in widget folder*/

define(["dojo/_base/declare",

"dijit/_WidgetBase",

"dojo/_base/lang",

"alfresco/core/Core",

"alfresco/core/CoreXhr",

"alfresco/core/CoreWidgetProcessing",

"dojo/dom-construct",

"dojo/dom",

"dojo/query",

"service/constants/Default"],

function(declare, _Widget, lang, Core, AlfCoreXhr, CoreWidgetProcessing, domConstruct, dom, query, AlfConstants) {

return declare([_Widget, Core, AlfCoreXhr, CoreWidgetProcessing], {

constructor: function _constructor(args) {

lang.mixin(this, args);

this.alfSubscribe("_valueChangeOf_INVOICE_DATE_TO", lang.hitch(this, "_onPayloadReceiveInvoiceDateTO"));

_onPayloadReceiveInvoiceDateTO: function gfp_services__getAllInvoice(payload) {

var dateFrom= (dojo.query("input[name=\"filterInvoiceDateFrom\"]")[0]).value;//Content from DateFrom

console.log(dateFrom); // I WANT TO SHOW THE VALUE FROM DATEFROM WIDGET

});

tansadio

I'm wondering how i can get the value with dojo module Dom or Query in aikau module widget or sevice.

This is the screenshot:

ddraper

Yes, I understand that ... the point is you probably shouldn't be...

If you really want to take this approach (and I strongly don't recommend it) then you actually want to be using the Dijit registry as this will actually find you the widget on which you can call the getValue function.

However, as I say this is not a sensible approach to take. What I don't understand is why you don't have a reference to you the widgets and what you're hoping to do with the data when you get it. Like I said before, if you explain the use case (as in the steps that the user is going to go through to work with the UI that you're implementing) then I may be able to help guide you on a better implementation.

tansadio

Here is my subject(summary):

First, i have some widget to filter AlfListView( TextBox, Select, DateTextBox, etc...).

Then, When The widget TextBox change, I get he value with PublishTopic and i want acces to the value Select or DateTextBox in function that catch PublishTopi.

Thanks,

tansadio

I don't have a difficult to get value widget TextBox and Select with Dojo module dom or query. But Impossible to make same way with DateTextBox.

I have test with Dojo DatetextBox and that works perfectly.

ddraper

OK, so in that case why not use the AlfFilteredList to contain your AlfListView... this extends the basic list capabilities to allow you to provide form control widgets to indicate how the widget should be filtered (using the widget) attribute. This video shows how you can used this widget for filtering (it is a demonstration of how to build up a page).

This would probably be a better approach to filtering a list. There are further examples of using this in the Aikau unit test application - the controller can be found here.

ddraper

The reason for it not working with the DateTextBox is because of where the data is stored in the widget - as opposed to in the DOM with those other widgets.

tansadio

Hey Dave Draper

I'm coming to get value Widget DateTextBox. Thanks for your help.

tansadio

Thanks a lot.

tansadio

Hi Dave Draper,

I'll come back at you. I used AlfFilteredList to contain my AlfListView and I define some widget like (TextBox, FilteringSelect, DateRange) in property widgetsForFilters (ALfFilteredList) and evrything work perfectly about filter but when i add widget Paginator after AlfFilteredList that's give some problem during the click on button forwad paginator the request reload my page twice.

First when my page load this code run:

{

config:

{

loadDataPublishTopic: "ALF_CRUD_GET_ALL",

loadDataPublishPayload: {

url: "ceri/supplierfolder",

itemsProperty: "alldocument",

.....

{

config: {

documentsPerPage: 5,

pageSizes: [3, 5,10],

}

I do not understand why my page is twice reloaded. The red is call when i click on button forward paginator and answer realod page and call the blue request.

I need your help.

Thanks for advance

ddraper

One of the main issues I encountered when developing Aikau is the inconsistency in the schema of the REST APIs that Alfresco had originally developed (this is subsequently being addressed with the new versionable APIs that are being developed). One of the issues is how pagination data is handled - for example, sometimes the API is expecting "pageSize" and "page" parameters, sometimes it is expecting "skipCount" and "maxItems", sometimes it's expecting "startIndex", etc.

This is one of the reasons why Aikau has separate services for requesting data - because they can normalize the data into a consistent schema that the widgets expect.

It would definitely be worth checking that the API you're using supports the pagination parameters that you're passing... it might be that you're not able to use the CrudService and that you need to have a custom service.

Are you calling a custom API that you've written or is it an Alfresco API? Does it definitely handle pagination? What parameters is it expecting?

Why you're getting an error I can't be sure - I'd usually recommend breaking on exceptions in the debugger and/or stepping through the loadData functon and subsequent function calls to understand what is happening.