You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guide/lesson-activewindow.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,23 @@
1
-
# How to create a LUYA ActiveWindow
1
+
# How to create a LUYA Active Window
2
2
3
3
In this lesson we are going to add a special email function to the [address book](https://github.com/luyadev/luya-module-addressbook) which we have created in the [previous lesson](https://github.com/luyadev/luya/blob/master/docs/guide/lesson-module.md). We will extend the original CRUD view for the contact group list in the CMS with another button. This button will open a window overlay which will give us the possibility to freely add custom actions and views. In our case, we want to add the feature to send all contacts in the group list an email.
4
4
5
-
We will learn how to add and integrate an [ActiveWindow](https://luya.io/guide/ngrest-activewindow) to an existing LUYA module.
5
+
We will learn how to add and integrate an [Active Window](https://luya.io/guide/ngrest-activewindow) to an existing LUYA module.
6
6
7
-
## Creating the ActiveWindow
7
+
## Creating the Active Window
8
8
9
-
As in the previous examples we will use a LUYA code wizard to create a generic base for our ActiveWindow:
9
+
As in the previous examples we will use a LUYA code wizard to create a generic base for our Active Window:
10
10
11
11
```sh
12
12
./vendor/bin/luya admin/active-window/create
13
13
```
14
14
See the GIF below:
15
15
16
-
![Creating an ActiveWindow](https://raw.githubusercontent.com/luyadev/luya/master/docs/guide/img/aws-create.gif"Creating an ActiveWindow with LUYA code wizard")
16
+
![Creating an Active Window](https://raw.githubusercontent.com/luyadev/luya/master/docs/guide/img/aws-create.gif"Creating an Active Window with LUYA code wizard")
17
17
18
-
## Adding the ActiveWindow to our group model
18
+
## Adding the Active Window to our group model
19
19
20
-
As stated in the [ActiveWindow Documentation]() we will have to add the button for opening the ActiveWindow view in the associated model file. As we want to send the emails for every group, we have to modify the `addressbook/model/Group.php` and add the function `ngRestConfig` as the declaration is missing in our case:
20
+
As stated in the [Active Window Documentation]() we will have to add the button for opening the Active Window view in the associated model file. As we want to send the emails for every group, we have to modify the `addressbook/model/Group.php` and add the function `ngRestConfig` as the declaration is missing in our case:
21
21
22
22
```php
23
23
public function ngRestActiveWindows()
@@ -29,7 +29,7 @@ public function ngRestActiveWindows()
29
29
```
30
30
31
31
If the function is already defined, just add the `GroupEmailActiveWindow' entry as shown above.
32
-
This includes linking to the correct class definition of the ActiveWindow, adding a text and a meaningful icon for the button.
32
+
This includes linking to the correct class definition of the Active Window, adding a text and a meaningful icon for the button.
33
33
34
34
## Configuring the mail LUYA component
35
35
@@ -53,17 +53,17 @@ The next step is to actual declare our functions which are needed to send the em
53
53
54
54
## Adding the email function
55
55
56
-
Next, we will define a callback function `CallbackSendMail` in our generated ActiveWindow class in `modules/addressbook/admin/aws/GroupEmailActiveWindow` which will be called by the view later. We will define `$subject` and `$text` as input parameters which will contain the email subject and text body. Additionally we will extend the call to the *index view* by adding the contact list as a parameter to the view call. Of course, this function have to be defined before in the `modules/addressbook/models/Group` model by adding:
56
+
Next, we will define a callback function `CallbackSendMail` in our generated Active Window class in `modules/addressbook/admin/aws/GroupEmailActiveWindow` which will be called by the view later. We will define `$subject` and `$text` as input parameters which will contain the email subject and text body. Additionally we will extend the call to the *index view* by adding the contact list as a parameter to the view call. Of course, this function have to be defined before in the `modules/addressbook/models/Group` model by adding:
Now we are able to use `$this->model->contacts` in our ActiveWindow class. It is important to note, that we can use `$this->model`, because we hooked the ActiveWindow in the *ngRestConfig* function. To fetch data it is highly advised to define additional function in the model class, like it has shown above and does not fall back to something like `Model::find()->select([...])->all()`.
64
+
Now we are able to use `$this->model->contacts` in our Active Window class. It is important to note, that we can use `$this->model`, because we hooked the Active Window in the *ngRestConfig* function. To fetch data it is highly advised to define additional function in the model class, like it has shown above and does not fall back to something like `Model::find()->select([...])->all()`.
65
65
66
-
With this said, here is the complete code snippet for the ActiveWindow class:
66
+
With this said, here is the complete code snippet for the Active Window class:
67
67
68
68
```php
69
69
<?php
@@ -102,15 +102,15 @@ class GroupEmailActiveWindow extends ActiveWindow
102
102
}
103
103
```
104
104
105
-
By using `sendSuccess` and `sendError` we are able to use the CMS message system and trigger the closing of the ActiveWindow. See in the next chapter how we will use a special form option for this.
105
+
By using `sendSuccess` and `sendError` we are able to use the CMS message system and trigger the closing of the Active Window. See in the next chapter how we will use a special form option for this.
106
106
107
107
Do not forget to include the used namespaces in the header.
108
108
And please note, that we have stripped the comments from the generated file to minimize the code snippet.
109
109
110
-
## Creating the ActiveWindow view
110
+
## Creating the Active Window view
111
111
112
112
The last step includes the creation of our needed `index.php` view file in `modules/addressbook/admin/views/aws/groupemail`.
113
-
One of the main purpose of the concept of an ActiveWindow is to be able to define your own views and functionality outside the CRUD view.
113
+
One of the main purpose of the concept of an Active Window is to be able to define your own views and functionality outside the CRUD view.
114
114
In our view we will include an overview of all contacts in the group, similar to the CRUD view and add an embedded email form with the email subject input field and a textarea for the actual email text:
115
115
116
116
```php
@@ -148,12 +148,12 @@ use luya\admin\ngrest\aw\ActiveWindowFormWidget;
148
148
<?php $form::end(); ?>
149
149
```
150
150
151
-
As you can see, we have used the {{luya\admin\ngrest\aw\ActiveWindowFormWidget}}. Besides the {{luya\admin\ngrest\aw\CallbackButtonWidget}} it is mostly what you will need to create a simple ActiveWindow form with additional functionality.
151
+
As you can see, we have used the {{luya\admin\ngrest\aw\ActiveWindowFormWidget}}. Besides the {{luya\admin\ngrest\aw\CallbackButtonWidget}} it is mostly what you will need to create a simple Active Window form with additional functionality.
152
152
153
-
We configured the widget to use our defined callback function in the ActiveWindow class and show a button label. We have also used the option to close the ActiveWindow when receiving a success message from the callback.
153
+
We configured the widget to use our defined callback function in the Active Window class and show a button label. We have also used the option to close the Active Window when receiving a success message from the callback.
154
154
155
155
## Result
156
156
157
-
After saving the view file, we have successfully added an ActiveWindow to the *addressbook* module. As you can see, it is fully integrated in our CRUD view, utilizes the already defined [bootstrap table styles](https://getbootstrap.com/docs/4.0/content/tables/) and uses the LUYA CMS notification service:
157
+
After saving the view file, we have successfully added an Active Window to the *addressbook* module. As you can see, it is fully integrated in our CRUD view, utilizes the already defined [bootstrap table styles](https://getbootstrap.com/docs/4.0/content/tables/) and uses the LUYA CMS notification service:
158
158
159
-
![Showing the ActiveWindow](https://raw.githubusercontent.com/luyadev/luya/master/docs/guide/img/aws-result.gif"Showing the ActiveWindow")
159
+
![Showing the Active Window](https://raw.githubusercontent.com/luyadev/luya/master/docs/guide/img/aws-result.gif"Showing the Active Window")
Copy file name to clipboardExpand all lines: docs/guide/luya-console.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ Admin UI commands:
38
38
|`admin/storage/cleanup`|Cleanup not existing files compare file system and database.
39
39
|`admin/storage/cleanup-image-table`|Find if duplications are available in the image table (same filter and file id). If confirmed it will remove all duplications except of one, the first one created.
40
40
|`admin/storage/process-thumbnails`|Create all thumbnails for filemanager preview. Otherwise they are created on request load.
41
-
|`admin/active-window/create`|Generate a [new ActiveWindow](ngrest-activewindow.md) class file based on your configuration.
41
+
|`admin/active-window/create`|Generate a [new Active Window](ngrest-activewindow.md) class file based on your configuration.
42
42
|`admin/crud/create`|Create new [NgRest CRUD](ngrest-concept.md) with a wizzard.
43
43
|`admin/crud/model`|Generates only the [NgRestModel](ngrest-model.md). Usage `./vendor/bin/luya admin/crud/model "app\models\Customer"`
Copy file name to clipboardExpand all lines: docs/guide/ngrest-activewindow.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,16 @@
1
-
# NgRest ActiveWindow
1
+
# NgRest Active Window
2
2
3
-
An *NgRest ActiveWindow* is a concept to attach a modal window into a [NgRest CRUD list](ngrest-concept.md). The ActiveWindow is always bound to an **ID** of an item and is represented as a button with an icon and/or an alias, e.g. a button in the CRUD list:
3
+
An *NgRest ActiveWindow* is a concept to attach a modal window into a [NgRest CRUD list](ngrest-concept.md). The Active Window is always bound to an **ID** of an item and is represented as a button with an icon and/or an alias, e.g. a button in the CRUD list:
> Use the [`admin/active-window` console command](luya-console.md) to generate a new ActiveWindow.
13
+
> Use the [`admin/active-window` console command](luya-console.md) to generate a new Active Window.
14
14
15
15
A very basic example class with the name *TestActiveWindow* just renders an index and contains a callback:
16
16
@@ -33,7 +33,7 @@ class TestActiveWindow extends \luya\admin\ngrest\base\ActiveWindow
33
33
}
34
34
```
35
35
36
-
Some general information about ActiveWindows:
36
+
Some general information about Active Windows:
37
37
38
38
+ The property `$module` is required and is used to determine the path for the views files.
39
39
+ The `index()` method is required and will always be the default method which is rendered by clicking on the button in the CRUD grid list.
@@ -46,11 +46,11 @@ Working with callbacks
46
46
47
47
Calling the callbacks
48
48
49
-
+ When a ActiveWindow callback is called the lower camelcase prefix method e.g. `callbackHelloWorld` must be called as `hello-world`.
49
+
+ When a Active Window callback is called the lower camelcase prefix method e.g. `callbackHelloWorld` must be called as `hello-world`.
50
50
51
51
## Attaching the class
52
52
53
-
In order to add an ActiveWindow into your NgRest config it has to be added in the {{luya\admin\ngrest\base\NgRestModel::ngRestActive Windows()}} method. As the ActiveWindow contains the {{yii\base\BaseObject}} as extend class you can configure all public properties while the class is loading. Below, an example of how to load an ActiveWindow class and define `label` and `icon` public properties. The alias and icon properties are present in every ActiveWindow and can always be overridden.
53
+
In order to add an Active Window into your NgRest config it has to be added in the {{luya\admin\ngrest\base\NgRestModel::ngRestActive Windows()}} method. As the Active Window contains the {{yii\base\BaseObject}} as extend class you can configure all public properties while the class is loading. Below, an example of how to load an Active Window class and define `label` and `icon` public properties. The alias and icon properties are present in every Active Window and can always be overridden.
54
54
55
55
```php
56
56
public function ngRestActiveWindows()
@@ -78,7 +78,7 @@ This `My Windows Alias` button will only be shown for if the row `firstname` equ
78
78
79
79
### View files
80
80
81
-
To render view files you can run the method `$this->render()` inside your ActiveWindow class. The render method will lookup for PHP view file based on the base path of your `$module` property. Lets assume we run `$this->render('index')` and have defined `admin` as your `$module` property and your ActiveWindow name is `TestActiveWindow` this will try to find the view file under the path `@admin/views/aws/test/index.php`.
81
+
To render view files you can run the method `$this->render()` inside your Active Window class. The render method will lookup for PHP view file based on the base path of your `$module` property. Lets assume we run `$this->render('index')` and have defined `admin` as your `$module` property and your Active Window name is `TestActiveWindow` this will try to find the view file under the path `@admin/views/aws/test/index.php`.
82
82
83
83
## How to make a Button
84
84
@@ -137,7 +137,7 @@ public function callbackPostData($firstname, $lastname)
137
137
138
138
## AngularJS in view files
139
139
140
-
As the admin UI is written in AngularJS which let´s you easily create inline AngularJS controllers to interact with your ActiveWindow class.
140
+
As the admin UI is written in AngularJS which let´s you easily create inline AngularJS controllers to interact with your Active Window class.
141
141
142
142
The below view file shows an AngularJS controller which collects data from the the controller assigned into the view but uses `ng-repeat to display and render the data.
After the ActiveWindow response from the function `addToList` has received the ActiveWindow will be reloaded. This is just a very quick integration example and it does not give the user a true AngularJS experience but shows you how to deliver solutions in a very short time.
164
+
After the Active Window response from the function `addToList` has received the Active Window will be reloaded. This is just a very quick integration example and it does not give the user a true AngularJS experience but shows you how to deliver solutions in a very short time.
165
165
166
166
When working with angular you might want to trigger some of the functions of the CRUD, here a list of what functions are callable and what they do:
167
167
@@ -206,9 +206,9 @@ To disable permission checks, you have to set the `permissionLevel` to am empty
206
206
...
207
207
```
208
208
209
-
## Existing reusable ActiveWindows
209
+
## Existing reusable Active Windows
210
210
211
-
The admin UI of LUYA provides some basic reusable ActiveWindows which you can reuse and use out of the box. Just attach them to your NgRest config with the given configuration. Take a look at the API reference for more details in how to attach the specific ActiveWindow.
211
+
The admin UI of LUYA provides some basic reusable Active Windows which you can reuse and use out of the box. Just attach them to your NgRest config with the given configuration. Take a look at the API reference for more details in how to attach the specific Active Window.
0 commit comments