Skip to content

Commit e9c1c37

Browse files
JelteMXJelteMX
authored
Merge pull request #23 from mendix/refactoring
Refactoring widget
2 parents b1963dd + 39899e8 commit e9c1c37

File tree

10 files changed

+324
-281
lines changed

10 files changed

+324
-281
lines changed

‎Gulpfile.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ var gulp = require("gulp"),
1414
del = require("del"),
1515
newer = require("gulp-newer"),
1616
gutil = require("gulp-util"),
17+
merge = require("merge-stream"),
18+
uglify = require("gulp-uglify"),
1719
gulpif = require("gulp-if"),
1820
jsonTransform = require("gulp-json-transform"),
1921
intercept = require("gulp-intercept"),
@@ -30,6 +32,40 @@ gulp.task("default", function() {
3032
gulp.watch("./src/**/*.js", ["copy:js"]);
3133
});
3234

35+
gulp.task("dev", function() {
36+
gulp.watch("./src/**/*", ["dev-compress"]);
37+
});
38+
39+
gulp.task("dev-handle", ["dev-clean"], function () {
40+
var jsStream = gulp.src([
41+
"src/**/*.js"
42+
])
43+
.pipe(uglify())
44+
.pipe(gulp.dest("dist/src"))
45+
.pipe(jsValidate())
46+
.pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER))
47+
.pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER));
48+
var otherStream = gulp.src([
49+
"src/**/*",
50+
"!src/**/*.js"
51+
])
52+
.pipe(gulp.dest("dist/src"));
53+
return merge(jsStream, otherStream);
54+
});
55+
56+
gulp.task("dev-compress", ["dev-handle"], function () {
57+
gulp.src("dist/src/**/*")
58+
.pipe(zip(pkg.name + ".mpk"))
59+
.pipe(gulp.dest(paths.TEST_WIDGETS_FOLDER))
60+
.pipe(gulp.dest("dist"));
61+
});
62+
63+
gulp.task("dev-clean", function () {
64+
return del([
65+
"dist/src"
66+
], { force: true });
67+
});
68+
3369
gulp.task("clean", function () {
3470
return del([
3571
paths.WIDGET_TEST_DEST,
@@ -84,5 +120,6 @@ gulp.task("modeler", function (cb) {
84120
widgetBuilderHelper.runmodeler(MODELER_PATH, MODELER_ARGS, paths.TEST_PATH, cb);
85121
});
86122

87-
gulp.task("build", ["compress"]);
123+
gulp.task("build", ["dev-compress"]);
124+
gulp.task("dev-build", ["compress"]);
88125
gulp.task("version", ["version:xml", "version:json"]);

‎README.md‎

Lines changed: 67 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,85 @@
33
This widget adds a user-defined string to your page, taking object attributes as input parameters.
44

55
## Contributing
6-
For more information on contributing to this repository visit [Contributing to a GitHub repository] (https://world.mendix.com/display/howto50/Contributing+to+a+GitHub+repository)
6+
For more information on contributing to this repository visit [Contributing to a GitHub repository] (https://docs.mendix.com/howto/collaboration-project-management/contribute-to-a-github-repository)
77

88
## Typical usage scenario
9-
9+
1010
Displaying multiple attributes as a single string
1111

1212
## Installation
1313

1414
Import the widget to your project and add the Format String to a dataview on a page. Configure the properties to determine how the widget will behave in your application.
1515

1616
## Features and limitations
17-
17+
1818
- Supports multiple attributes
1919
- Attributes can be retrieved one-deep
2020
- Setting the same attribute multiple times using different date/time formatting is not supported.
2121

2222
## Properties
2323

24-
* *Display as* - Lets you set the HTML element type to be rendered, <div> or read-only <input>. If rendered as HTML, the Display string is interpreted as literal HTML.
25-
* *On click* - A microflow that is to be executed on click.
26-
* *Display string* - The template string that should be displayed.
27-
* *Empty value replacement* - This string is used for the replace whenever the attribute is found empty.
28-
* *Attributes* - The list of attributes and their indentiefiers to be used in the *Display string* property of this widget.
29-
* *Datetime format* - Renders datetime attribute as date and/or time. Relative will render the date relative to current datetime.
30-
* *Date pattern* - Overrides the date part with the dojo/data/locale pattern specified. (e.g `MMMM d, 'in the year' yyyy GGGG`)
31-
* *Time pattern* - Overrides the time part with the dojo/data/locale pattern specified. (e.g `h:m:s.SSS a z`)
32-
* *Decimal Precision* - The number of decimals to display.
33-
* *Group Digits* - Displays separator character in case of a number datatype
24+
### Data source
25+
26+
The Data Source is used to add replacements for your **Display string**. The values from the attributes will be used to replace placeholders. See below for an example.
27+
28+
| Property | Description |
29+
| --- | --- |
30+
| Variable name | Identifies the attribute value, this name should be used in 'Display string' property. |
31+
| Attribute | Value of this attribute will be used to replace ${your_Variable_Name}, defined in 'Display string' property |
32+
| Empty value replacement | This string will be used when an attribute returns empty. Note that this string is interpreted as HTML. |
33+
| Date format | Shows date and/or time according to locale of user. Relative is time relative to current datetime. (E.g. 3 hours from now) |
34+
| Date pattern | Optional, date pattern to override date part according to dojo/date/locale. See [Dojo documentation](https://dojotoolkit.org/reference-guide/1.10/dojo/date/locale/format.html#attributes) |
35+
| Time pattern | Optional, time pattern to override time part according to dojo/date/locale. See [Dojo documentation](https://dojotoolkit.org/reference-guide/1.10/dojo/date/locale/format.html#attributes) |
36+
| Render value as HTML | Escapes string value when set to false |
37+
| Decimal precision | Amount of decimals |
38+
| Group digits | Displays a numeric value with group digits |
39+
40+
### Behavior
41+
42+
| Property | Description |
43+
| --- | --- |
44+
| On click | Microflow to be invoked on click. |
45+
| Stop propagation | Stop handling click action, prevent click event to go to other components. This can be useful when you don't want other actions (like selection in a listview) to happen |
46+
| Display string | This string is the heart of the FormatString. It will be used as a template for the content. Use `${your_Variable_Name}` to have the attribute value inserted in this string. Note that this string, except for the replacements, is interpreted as HTML. |
47+
| Class string | Use `${your_Variable_Name}` to have the attribute value used in the className of the widget. See 'Display string'. If you want to use multiple classes, make sure you separate them with spaces. |
48+
| Translatable strings | Use translatable strings (instead of internal language pack) |
49+
| Locale selection | When you use the internal language pack, only a few languages are supported. Choose 'automatic' to let Dojo choose based on the application (with a fallback to 'en-us') |
50+
51+
### Customization
52+
53+
These are the values that you can change when you use 'Translatable Strings'. Note that the widget has default values for 'nl-nl', 'en-us' and 'en-gb'.
54+
55+
* String value for second
56+
* String value for seconds
57+
* String value for minute
58+
* String value for minutes
59+
* String value for hour
60+
* String value for hours
61+
* String value for day
62+
* String value for days
63+
* String value for week
64+
* String value for weeks
65+
* String value for month
66+
* String value for months
67+
* String value for year
68+
* String value for years
69+
* String value for from now
70+
* String value for ago
71+
72+
## Example usage
73+
74+
* Let's say you have an attribute that contains a hyperlink to a website (eg `http://mendix.com`). The attribute is called `Link`
75+
* You want to show a link, it has to be a plain link. A simple HTML link
76+
77+
Here is how you do that:
78+
79+
* Add an attribute at 'Data Source'. Select the attribute `Link`
80+
* Set the variable name to `LinkVariable`
81+
* In **Behavior** is set the **Display string** to:
82+
83+
```html
84+
<a href="${LinkVariable}" target="_blank">Link Text</a>
85+
```
86+
87+
This is a simple explanation of usage.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "formatstring",
3-
"version": "5.5.2",
3+
"version": "5.6.0",
44
"description": "This widget adds a user-defined string to your page, taking object attributes as input parameters.",
55
"license": "",
66
"author": "",
@@ -12,10 +12,12 @@
1212
"gulp-if": "^2.0.1",
1313
"gulp-intercept": "^0.1.0",
1414
"gulp-json-transform": "^0.4.2",
15+
"gulp-jsvalidate": "^3.0.0",
1516
"gulp-newer": "^1.3.0",
17+
"gulp-uglify": "^3.0.0",
1618
"gulp-util": "^3.0.7",
1719
"gulp-zip": "^3.2.0",
18-
"gulp-jsvalidate": "^3.0.0",
20+
"merge-stream": "^1.0.1",
1921
"widgetbuilder-gulp-helper": "https://github.com/JelteMX/widgetbuilder-gulp-helper/archive/1.0.1.tar.gz",
2022
"yargs": "^6.0.0"
2123
},

‎src/formatstring/formatstring.xml‎

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,12 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<widget id="formatstring.widget.formatstring" needsEntityContext="true" xmlns="http://www.mendix.com/widget/1.0/">
3-
<name>Format string</name>
4-
<description>Format string.</description>
3+
<name>Format string</name>
4+
<description>Format string.</description>
55

6-
<icon>
7-
iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhk
8-
iAAAAAlwSFlzAAAFMQAABTEBt+0oUgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3Nj
9-
YXBlLm9yZ5vuPBoAAAT4SURBVGiB1VrNTxtHFP/N7Owaf6JUiFQNhJRUvfARckSV
10-
sNTcmq9bI86tKg5EjXJqkHpKIxEiokr9GwBxzSEXUik98HXqpZGqcisOIaS4gPcT
11-
78z0YAy79q7X2EDNTxrN+HnW/v32+b15j4VIKXGeQf9vAs3i3AtglYbnvzy/no4n
12-
JzKZzE0hedyybDCFQWEKmKJAOVx7ZkU5GAyMHa0ppSCEQEoJIQQ4d8E5h+vywzXn
13-
HC53wd2jmXMXLufgLgdVKBSFWqZhvjQN/cn9+w9/9/Il3hh49vOzod7LPctXrvS2
14-
tbe3g1IFlmXCdV0QQkApLQ1CQSjxrCkoJb41IRSUEIAQQEoIKSGlgBASUgiIqrWA
15-
FPJwLYQApQpimgYuOP7N5/H23Yb199v1Lx56RPg8oDH1h66u7rbBgWtwXRetEuCE
16-
EPR+ehWpv/6Mf/jn/SMAX5ff8wmIt8Vup1NpWJZ15iSjUCwWkYgnkEqkb3ntPgGW
17-
ZScIoS1z5yshIWE7dtxr82UhQ9db8u6XYegG8vm8z+bzAOccxeJ+y3rAcRwIzn02
18-
vwAhICQCBRQKeygYe6dGLp3MIJ3O1NwjIcGF8Nl8AoQQQMjdN20DG+9yTdIMR3dX
19-
T7SAg/PEiyoBEjLQA92XevBZ7+cnQDUYjuPAcZzamyQiBHAR5oD6vuCUISEheE0P
20-
lNi3ahBLecSxDOrfwENjoBVAIEscPagO4pAY0PVCw1koncwglUo3dK0XMioGymk0
21-
CJZjYvP9RkNfzC6xkxEQmUZ5uAe6PrnccBaybRu2bTd0rRdSIiqIw7PQSZFoBgRR
22-
aVQIIOQkbgWUDjI/t7qDuBUgJSAjT+IGPTAzM9MUucHBQQwMDETsKnVsXlRUo6VS
23-
ohHMzs42dF0ZqqpGCpCyxNGL6pM4wAPT09MYGxtDMpkM/fDl5eXjcvbBNM06epGI
24-
Yk7KYA+srKxgbW0N4+Pj6O/vD/zo7e3t4zFuAEEHma+UKL8ppfQNLaahoBcw+XQS
25-
M7Mz2D9oes56BHmgWkBACMQ0DTFNg6aq+PXVK/z0+DFyudPrDWpB1kyjnCMojWox
26-
zfd668MWnk5N4s6du7jx5Q0QQjA3N9cwqdHR0br2lc6BiJYyKINqmlZtBPDmzR8Y
27-
ujaEjo6OMxEAILqllAG/s1isWsC9e6PIjmSh6zo451haWjoOZx+2trbq2ldXSxkU
28-
A14PXLjwER58/wCpVBq7u7vHJtEsGuqJywJGRrK4dfM2dF1HoVA4ZarViOwHBA/2
29-
QCaTxrfffIeLFz/Gzs7OqZKMguCRxVz1STzx6EfYtl2T/Pz8fFPE+vv70dfXF7lP
30-
1qqFwoq4vb29yAKvWQGapkUKiAxiHhID9VSni4uL9XINhK7r0HU9cl/NNMor/u54
31-
HGxubjZ87XFQVxC3akMD1NETA60rgBBSu5ijlIKxqud+LQPGGFRV9du8LyglhmEY
32-
yUqVrQLLsqAo1PTafB4oFt0Xr397DULI2TKrA4QQLC4twradF167zwO2bU/l1nN3
33-
5+fnE8PDw4jH43BdF0KIw8eslXOQzTuXnxOXc3jYHGQjhIAxBtM0sbq6itx6zjQM
34-
Y8onrDJgs9ns9c7Ozon29vavhBAJx3HAGIOmadA0DaqqHq69o2z3zoyxQwGu66JY
35-
LGJ/f79qrhze91VVhRDC0nX9ZT6ff7KwsBD+oPs84tz/r8S5F/AfqCmjVAJVWGgA
36-
AAAASUVORK5CYII=
37-
</icon>
6+
<icon>iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFMQAABTEBt+0oUgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAT4SURBVGiB1VrNTxtHFP/N7Owaf6JUiFQNhJRUvfARckSVsNTcmq9bI86tKg5EjXJqkHpKIxEiokr9GwBxzSEXUik98HXqpZGqcisOIaS4gPcT78z0YAy79q7X2EDNTxrN+HnW/v32+b15j4VIKXGeQf9vAs3i3AtglYbnvzy/no4nJzKZzE0hedyybDCFQWEKmKJAOVx7ZkU5GAyMHa0ppSCEQEoJIQQ4d8E5h+vywzXnHC53wd2jmXMXLufgLgdVKBSFWqZhvjQN/cn9+w9/9/Il3hh49vOzod7LPctXrvS2tbe3g1IFlmXCdV0QQkApLQ1CQSjxrCkoJb41IRSUEIAQQEoIKSGlgBASUgiIqrWAFPJwLYQApQpimgYuOP7N5/H23Yb199v1Lx56RPg8oDH1h66u7rbBgWtwXRetEuCEEPR+ehWpv/6Mf/jn/SMAX5ff8wmIt8Vup1NpWJZ15iSjUCwWkYgnkEqkb3ntPgGWZScIoS1z5yshIWE7dtxr82UhQ9db8u6XYegG8vm8z+bzAOccxeJ+y3rAcRwIzn02vwAhICQCBRQKeygYe6dGLp3MIJ3O1NwjIcGF8Nl8AoQQQMjdN20DG+9yTdIMR3dXT7SAg/PEiyoBEjLQA92XevBZ7+cnQDUYjuPAcZzamyQiBHAR5oD6vuCUISEheE0PlNi3ahBLecSxDOrfwENjoBVAIEscPagO4pAY0PVCw1koncwglUo3dK0XMioGymk0CJZjYvP9RkNfzC6xkxEQmUZ5uAe6PrnccBaybRu2bTd0rRdSIiqIw7PQSZFoBgRRaVQIIOQkbgWUDjI/t7qDuBUgJSAjT+IGPTAzM9MUucHBQQwMDETsKnVsXlRUo6VSohHMzs42dF0ZqqpGCpCyxNGL6pM4wAPT09MYGxtDMpkM/fDl5eXjcvbBNM06epGIYk7KYA+srKxgbW0N4+Pj6O/vD/zo7e3t4zFuAEEHma+UKL8ppfQNLaahoBcw+XQSM7Mz2D9oes56BHmgWkBACMQ0DTFNg6aq+PXVK/z0+DFyudPrDWpB1kyjnCMojWoxzfd668MWnk5N4s6du7jx5Q0QQjA3N9cwqdHR0br2lc6BiJYyKINqmlZtBPDmzR8YujaEjo6OMxEAILqllAG/s1isWsC9e6PIjmSh6zo451haWjoOZx+2trbq2ldXSxkUA14PXLjwER58/wCpVBq7u7vHJtEsGuqJywJGRrK4dfM2dF1HoVA4ZarViOwHBA/2QCaTxrfffIeLFz/Gzs7OqZKMguCRxVz1STzx6EfYtl2T/Pz8fFPE+vv70dfXF7lP1qqFwoq4vb29yAKvWQGapkUKiAxiHhID9VSni4uL9XINhK7r0HU9cl/NNMor/u54HGxubjZ87XFQVxC3akMD1NETA60rgBBSu5ijlIKxqud+LQPGGFRV9du8LyglhmEYyUqVrQLLsqAo1PTafB4oFt0Xr397DULI2TKrA4QQLC4twradF167zwO2bU/l1nN35+fnE8PDw4jH43BdF0KIw8eslXOQzTuXnxOXc3jYHGQjhIAxBtM0sbq6itx6zjQMY8onrDJgs9ns9c7Ozon29vavhBAJx3HAGIOmadA0DaqqHq69o2z3zoyxQwGu66JYLGJ/f79qrhze91VVhRDC0nX9ZT6ff7KwsBD+oPs84tz/r8S5F/AfqCmjVAJVWGgAAAAASUVORK5CYII=</icon>
387

398
<properties>
9+
<!-- DATA SOURCE -->
4010
<property key="notused" type="object" isList="true" required="false">
4111
<caption>Attributes</caption>
4212
<category>Data source</category>
@@ -106,17 +76,44 @@
10676
</property>
10777
</properties>
10878
</property>
79+
<!-- BEHAVIOR -->
10980
<property key="onclickmf" type="microflow" required="false">
11081
<caption>On click</caption>
11182
<category>Behavior</category>
11283
<description>Microflow to be invoked on click.</description>
11384
<returnType type="Void"/>
11485
</property>
86+
<property key="stopClickPropagation" type="boolean" defaultValue="true">
87+
<caption>Stop propagation</caption>
88+
<category>Behavior</category>
89+
<description>Stop handling click action, prevent click event to go to other components</description>
90+
</property>
91+
<property key="displaystr" type="translatableString" multiline="true" defaultValue="" required="false">
92+
<caption>Display string</caption>
93+
<category>Behavior</category>
94+
<description>Use ${[your_Variable_Name]} to have the attribute value inserted in this string. Note that this string, except for the replacements, is interpreted as HTML. </description>
95+
</property>
96+
<property key="classstr" type="translatableString" multiline="false" required="false">
97+
<caption>Class string</caption>
98+
<category>Behavior</category>
99+
<description>Use ${[your_Variable_Name]} to have the attribute value used in the className of the widget. See 'Display string'. If you want to use multiple classes, make sure you separate them with spaces.</description>
100+
</property>
115101
<property key="useTranslatableStrings" type="boolean" defaultValue="false" required="true">
116102
<caption>Translatable strings</caption>
117103
<category>Behavior</category>
118104
<description>Use translatable strings (instead of internal language pack)</description>
119105
</property>
106+
<property key="localeSelection" type="enumeration" defaultValue="automatic">
107+
<caption>Locale selection</caption>
108+
<category>Behavior</category>
109+
<description>When you use the internal language pack, only a few languages are supported. Choose 'automatic' to let Dojo choose based on the application (with a fallback to 'en-us')</description>
110+
<enumerationValues>
111+
<enumerationValue key="automatic">Automatic</enumerationValue>
112+
<enumerationValue key="en_us">en-us</enumerationValue>
113+
<enumerationValue key="nl_nl">nl-nl</enumerationValue>
114+
</enumerationValues>
115+
</property>
116+
<!-- CUSTOMIZATION -->
120117
<property key="translateStringsecond" type="translatableString">
121118
<caption>String value for second</caption>
122119
<category>Customization</category>
@@ -277,15 +274,5 @@
277274
<translation lang="nl_NL">geleden</translation>
278275
</translations>
279276
</property>
280-
<property key="displaystr" type="translatableString" multiline="true" defaultValue="" required="false">
281-
<caption>Display string</caption>
282-
<category>Behavior</category>
283-
<description>Use ${[your_Variable_Name]} to have the attribute value inserted in this string. Note that this string, except for the replacements, is interpreted as HTML. </description>
284-
</property>
285-
<property key="classstr" type="translatableString" multiline="false" required="false">
286-
<caption>Class string</caption>
287-
<category>Behavior</category>
288-
<description>Use ${[your_Variable_Name]} to have the attribute value used in the className of the widget. See 'Display string'. If you want to use multiple classes, make sure you separate them with spaces.</description>
289-
</property>
290277
</properties>
291278
</widget>

0 commit comments

Comments
 (0)