Creating my own date widget

[dieter]

Hello,

i want to create a custom widget, derived from the date field widget. I can set the "normal" properties (e.g. font, color, ...) without problems. But the binding properties for the RPG program field always have the English date format. We need the German format.

Our js-code is the following:
pui.toolbox.add({
category: "ECC Widgets",
widget: "date field",
text: "ECC Date Field",
icon: "/profoundui/proddata/images/icons/date_field.png",

proxyHeight: 30,
proxyWidth: 100,
proxyHTML: '<input type="text"></input>',

defaults: {
"css class": "input ecc_date_field",
"width": "70px"
}
});


Our custom date widget should have the following properties or default values:
- the data type should be "date"
- the Locale should be "Germany"
- the date pattern should be "d.m.Y"

Is there a possibility to do this?

Dieter

[kfritz]

Hi Dieter,

please refer to this topic: http://www.profoundlogic.com/forums/php ... date#p4020

Hope this helps.

[Scott Klement]

Thanks, Karl!

Yes, as Karl alludes to, the date format is controlled by a Profound UI Locale. You can create your own custom locale by following the instructions in the post that Karl pointed you to.

But, if you have any questions or problems, please let us know, we'd be happy to help!

[dieter]

Hello Karl, hello Scott,

thank you for your answeres. But i think that is not what i need. (Maybe my English is not well enought to express exactly what i want). The locales which are defined in ProfoundUI, are good for me. The German locale with the date pattern d.m.Y is exactly what i need in my date widget. My problem is that the Visual Designer allways suggests the English locale when i draw a date field onto the screen. The Visual Designer also suggests a character field for the field binding in the value property. I would like to have the suggestion "date field".

Please do the following to see what i mean:
In the Visual Designer draw a date field onto the screen. Then click on the "value" property for binding the value to a program field. Then a new dialog opens. In this dialog the suggestion for the field type ist "character", "length 10". Then change the field type to "Date". Then there appears "Date format" and "Locale". I can change the format to "15.01.2013" and the locale to "German (Germany)". This works. But i have to do these changes every time when i draw a new date field onto my screen. So it would be nice if i could code in my own date widget the default values for "field type", "date format" and "locale" to the needed german form. Anyway i will create my own date widget (of cource derived from your original date field) to get our standardized font, color and so on.

So my question is: Can i manipulate the default values in this "extra"-dialog?

Dieter

[Scott Klement]

It's possible to set a default date format for a given Profound UI instance so that when you select "Default" for the date format, it comes up the way you expect. This is described here:
http://www.profoundlogic.com/docs/displ ... ate+Format

This may work better for you than changing the date format on a particular custom widget.

I will look into whether it's possible to change the defaults in the binding dialog, and see what I can find out.

[Scott Klement]

Okay, it's just a matter of setting the default for the "value" attribute to a binding object that has the right settings. To do this, you need to bind it to a field, but the field can be something like "Field0001", and then the user will have to change the fieldname after dragging the date to the screen.

For example:

Code: Select all

pui.toolbox.add({
  "category": "Custom Widgets",
  "widget": "date field",
  "text": "Scott's Date Field",
  "defaults": {
     "value": { 
         "fieldName": "Field0001", 
         "dataType": "date", 
         "formatting": "Date", 
         "dateFormat": "", 
         "locale": "de_DE", 
         "designValue": "[Field0001]"
     }
  }  
});

In this case, I've set it to the default date format by setting the date format to "" (two quotes with nothing in between.) You could also set a date format here if you wanted.

An easy way to find out exactly what the parameters should be is to create a display/record format with just a date field, configured the way you want it. Then save that display file to a local file on your PC's hard drive. This will show you what the JSON for the value property needs to look like.

Good luck!

[dieter]

Hello Scott,

sorry that my reply comes so late, but yesterday in Germany was a non working day. Thank you very much for your example code and your explanation. It works fine! That is exactly what i need.

Dieter