Kickstart: date in form

[mrahn]

Dear Community.

I want to display the current date/datetime in a form. How could I achieve this in the kickstart ui?

Best regards

Marco

btw: I wonder whether there is some kind of documentation that explains how to use all the kickstart ui widgets. The documentation I know off is limited to pure Activiti (without kickstart) or, as far as it concerns kickstart, is very basic. Are there some sample processes available?

[gdharley · Accepted solution]

The community Blog provides the best overview of the kickstart widgets but as you say, it is extremely limited.

There are a couple of ways to display date/time.

1. Retrieve in script and save as a process variable (this would be a fixed datetime).

2. Create a custom widget that displays datetime (this could be static or dynamic).

The biggest problem I have found with the custom stencils is that you cant use them on an existing form.

So, to use a custom widget, you need to start with a custom stencilset when you first create the form.

So, tip for young players. Before you start building anythign real. Create a custom stencilset (even if you have no custom widgets) and use this for creating your forms. This way, you can add custom widgets if needed later.

If you use the default stencilset, you are stuck with it.

Greg

‌

[mrahn]

Thanks Greg!

1. I wonder how to retrieve the date in a script. How to post this to a variable? Do you have a example for this? I know Activiti only by Kickstart.

2. I'm aware of the default stencilset difficulty .. there is a hint in the official documentation

Best regards

Marco

[gdharley]

Hi Marco,

I assume by Kickstart you mean the Activiti Enterprise "Kickstart App".
If so, then following the instructions below.

1. Inside the form editor, add a Display Text field where you want the date:

2. Now go the the Javascript tab and add a new Javascript block on the formRendered event with the following content:

where the "mydate" field name is the "ID" given to the display text field you added in 1.

On render, you will get:

Notice the current date and time rendered in column 2.
Obviously you can parse to format to your locale and prefered layout.

Cheers,

Greg

‌

[mrahn]

Hello Greg.

Many thanks for your step-by-step instruction. This kind of help is very appreciated!

I followed your instructions step by step but couldn't get the expected result.

Taking your first screenshot it seems that you have, after the orange "Label 1" field, a "Display value" field and a "Display text" field in the 2nd column. Taking your third screenshot I'd expect the "Display value" field rendering the date whilst the "Display text" field is empty.

btw: how would I save the new Date() to a process variable?

Best regards

Marco

.. we run Activiti Enterprise 1.5.3

[gdharley]

Dont look at the input field or selector. I used an existing test form. The "Display Text" field is the bottom right field.

The Display Text field has an ID of mydate (this will be bound to a variable called mydate in the process instance).

The javascript code associated with the FormRendered event is:

var myDate = scope.findFormFieldWithId(scope.allFormFields, 'mydate');
var now = new Date();
myDate.value = now;

This will automatically create a process variable mydate on submission.

Greg

‌

[mrahn]

It's sad, but it seams I had a typo. I copied your code and it works fine.

It works exactly as you descripted it.

Thanks again!

Marco

[mrahn]

Just to feedback the community with what we found:

We decided not to follow Gregs client-site approach but use a task listener since it's more flexible.

Here is what we've done:

String:

var execution = task.execution;

// get current date
//var today = task.getCreateTime();
var today = new Date();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (mm < 10) {
 mm = '0' + mm.toString();
}
else {
mm = mm.toString();
}
yyyy = yyyy.toString();

// get process id
var processid = execution.getId();
processid = processid.toString();

// write to process variable
execution.setVariable('casenumber',yyyy+'-'+mm+'#'+processid);

Thus I am able to provide a "case number" (format: yyyy-mm#processid).

[gdharley]

Nice work. The only thing I would say is that by doing this on the server, your data will not be localized and be based on the server timezone.
Typically not an issue but if you are using a hosting service such as AWS/Heroku/Bluemix/Pivotal etc then the timezone may not be what you expect (depends on what region the server is running in).

G

‌