Comment on page
What's New in V4
The naming used in the Data Model XML, Views XML and some JavaScript functions are changed to be more consistent and intuitive.
The data model and view XML changes are handled automatically by the migration process. However, the JavaScript changes have to be performed manually.
It is now longer required to define
link elements explicitly. Instead, call the links by path with link.link_path(). The same function can now also be called directly from the on-press attribute in the view XML, optionally passing view variables as arguments. This replaces the need for the link attribute on buttons.<view title="Main Menu">
<button label="New User" on-press="link.new_user()" />
</view>
<view title="Select Task">
<var type="query:task" name="tasks" />
<object-list label="View Task" query="tasks">
<action on-press="link.view_task($selection)" />
</object-list>
</view>
It is no longer required to use
return link.some_view() - instead just use link.some_view(). The link function now throws an exception, that is used for navigation.Instead of defining
ondismiss actions on links, you can now define a single resume function per view. If defined, this is called whenever the user returns to the view, both via a dismiss call and via the back button.function resume(from) {
if(from.dismissed && from.path == 'user/new') {
dialog("New User", "A new user has been created");
}
}
enum has been renamed to single-choice-integer, and enum_set has been renamed to multiple-choice-integer. Additionally, these types now take explicit keys for each option.<field name="color" type="single-choice-integer">
<option key="2">Red</option>
<option key="6">Green</option>
<option key="4">Blue</option>
<option key="5">Yellow</option>
</field>
There are also three new choice types:
Like
single-choice-integer, but takes string keys. This is recommended over single-choice-integer.<field name="color" type="single-choice">
<option key="red">Red</option>
<option key="green">Green</option>
<option key="blue">Blue</option>
<option key="yellow">Yellow</option>
</field>
Like
single-choice-integer, but has exactly two boolean options.<field name="confirmed" type="boolean" />
<!-- If not specified, default options are:
<option key="false">No</option>
<option key="true">Yes</option>
-->
<field name="acceptance" type="boolean">
<option key="true">Accepted</option>
<option key="false">Not Accepted</option>
</field>
Like
multiple-choice-integer, but takes string keys. This is recommended over multiple-choice-integer.<field name="colors" type="multiple-choice">
<option key="red">Red</option>
<option key="green">Green</option>
<option key="blue">Blue</option>
<option key="yellow">Yellow</option>
</field>
date fields now use a Day object instead of Date object to represent the value. The Day object represents only the Gregorian day, with no time or timezone.var today = Day.today();
var today = new Day(); // Same as Date.today()
var day = new Day("2014-01-05") // Parse some day.
var day = new Day(new Date()); // Convert Date to Day, in local timezone.
day.startOfDay(); // Start of day in local timezone, as a Date
day.endOfDay(); // End of day in local timezone, as a Date
day.toString(); // “2014-01-05”
day.toISOString(); // “2014-01-05”
day.toJSON(); // “2014-01-05”
day.valueOf(); // 1388880000000
day.getYear() // 2014
day.getMonth() // 1 (0 - 11)
day.getDay() // 5
If no label is specified on an input component, it is now inferred from the Data Model. Will be blank for direct view variables, since they do not have any label. This that you can have more concise view components, for example:
<text-input bind="my_form.field1" />
<text-input bind="my_form.field2" />
<single-choice-dropdown bind="my_form.choice3" />
To explicitly create an input without any label, use
label="". This will remove it completely (no whitespace). To still have some whitespace, use label=" " (a single space in the label).The placeholder text of text inputs may now be customized by specifying
placeholder="My placeholder". This may be used to create more compact forms, for example:<text-input bind="address_street" label="" placeholder="Street" />
<text-input bind="address_city" label="" placeholder="City" />
<text-input bind="address_code" label="" placeholder="Postal Code" />
The JourneyApps API has been upgraded significantly, and is now available in V4.
Please see the documentation for the Backend API or refer to the section about Updating to the V4 API.
Old syntax | New syntax |
|---|---|
<schema> | <data-model> |
<object name="..." label="..." > | <model name="..." label="..." > |
<attribute type="..." name="..." label="..." > | <field type="..." name="..." label="..." > |
<display format="..." > | <display>...</display> |
These changes are automatically applied by the migration process.
Old syntax | New syntax |
|---|---|
type="string" | type="text" |
type="string" spec="text.address" | type="text:address"
Text Subtypes |
type="int" | type="integer" |
type="decimal" | type="number" |
type="date" | type="date" |
type="datetime" | type="datetime" |
type="location" | type="location" |
type="attachment" media="image/jpeg" | type="photo" |
type="attachment" media="image/svg+xml" | type="signature" |
type="enum" | type="single-choice-integer" |
type="enum_set" | type="multiple-choice-integer" |
n/a | type="single-choice" |
n/a | type="boolean" |
n/a | type="multiple-choice" |
type="myobject" array="true" | type="query:myobject" |
These changes are automatically applied by the migration process.
Old syntax | New syntax |
|---|---|
<selectbox type="radio" /> | <single-choice-radio /> |
<selectbox type="dropdown" /> | <single-choice-dropdown /> |
<textinput /> | <text-input /> |
<date /> | <date-input /> |
<datetime /> | <datetime-input /> |
<checklist /> | <multiple-choice-checklist /> |
<barcode /> | <scan-barcode /> |
<gps /> | <capture-coordinates /> |
<signature /> | <capture-signature /> |
n/a | <display-signature /> |
<picture /> | <capture-photo /> |
<viewpicture /> | <display-photo /> |
<list type="dropdown" /> | <object-dropdown /> |
<list type="static" /> | <object-list /> |
<object-table /> | <object-table /> |
<table> <info label="...">...</info> <info label="...">...</info> </table> | <info-table> <row label="...">...</row> <row label="...">...</row> </info-table> |
<button id="proceed" /> | <button type="primary" /> |
<button link="some_link" /> | <button on-press="link.some_view()" /> |
These changes are automatically applied by the migration process.
These changes are not automatically applied by the migration process, and have to be applied manually.
Old syntax | New syntax |
|---|---|
Query#fetch() | Query#toArray() |
Query#get() | Query#first() |
Query#destroy_all() | Query#destroyAll() |
Query#order_by() | Query#orderBy() |
Query#fetch().forEach(function(object) {...}) | Query#forEach(function(object) {...}) |
DatabaseObject#set_all() | DatabaseObject#setAll() |
return link.some_link(); | link.some_view(); |
Last modified 1yr ago