Quantcast
Channel: Live News for Yii Framework
Viewing all articles
Browse latest Browse all 3361

[Wiki] Use kartik Growl with Yii2 flash messages

$
0
0

This is to show you how to use Yii2 flash messages with Kartik Growl (bootstrap notify wrapper).

A default Yii2 flash message would be as follows:

Yii::$app->getSession()->setFlash('success', 'My success message!');

This doesn't work for what we are tying to do. We will need to add a few attributes/Info to our flash message.

Luckily Yii2's flash messages accepts an array for the $message property so we will take advantage of this.

You can dynamically set any of the plugins options like I do below but I will just set some of them.

'type'=>'success'//String, can only be set to danger, success, warning, info, and growl
'message'=>'Your Message' // String
'icon'=>'Your Icon class or a path to an image' //String
//duration is set dynamically because sometimes we have short messages and other times we have longer messages.
'duration'=>3000 //Integer //3000 default. time for growl to fade out.
'title'=>'Your Title' //String
'positionY'='top'//String // defaults to top, allows top or bottom
'positionX'='right'//String // defaults to right, allows right, center, left

So lets join the options with session like so

Plese Note:

  • Message and titles are encoded by default because they are set from user input (dropdown list) in a lot of places.

  • I also translate the messages and titles.

  • All values check if they are set.

You can remove any of the things I just listed if you like as they are not necessary.

A configured flash message would look something like this

Yii::$app->getSession()->setFlash('success', [
    'type' => 'success',
    'duration' => 12000,
    'icon' => 'fa fa-users',
    'message' => Yii::t(Html::encode('My Message')),
    'title' => Yii::t('app', Html::encode('My Title')),
    'positonY' => 'top',
    'positonX' => 'left'
]);

You could also leave out a couple of settings and just use the default ones like

Yii::$app->getSession()->setFlash('success', [
    'type' => 'success',
    'icon' => 'fa fa-users',
    'message' => Yii::t(Html::encode('My Message')),
    'title' => Yii::t('app', Html::encode('My Title')),
]);

The above is placed in your action i.e. for example

public function actionCreate() {
$model = new SomeModel();
 
if ($model->load(Yii::$app->request->post()) && $model->save()) {
 Yii::$app->getSession()->setFlash('success', [
     'type' => 'success',
     'duration' => 5000,
     'icon' => 'fa fa-users',
     'message' => 'My Message',
     'title' => 'My Title',
     'positonY' => 'top',
     'positonX' => 'left'
 ]);
 return $this->redirect(['view', 'id' => $model->id]);
} else {
 return $this->render('create', [
             'model' => $model,
 ]);
}

In your view/layouts/main.php the actual growl widget should be placed in your body somewhere just like the default Yii2 Alert Widget.

use Yii;
use yii\helpers\Html;
 
//Get all flash messages and loop through them
<?php foreach (Yii::$app->session->getAllFlashes() as $message):; ?>
<?php
echo \kartik\widgets\Growl::widget([
    'type' => ($message['type']) ? $message['type'] : 'danger',
    'title' => ($message['title']) ? $message['title'] : 'Title Not Set!',
    'icon' => ($message['icon']) ? $message['icon'] : 'fa fa-info',
    'body' => ($message['message']) ? $message['message'] : 'Message Not Set!',
    'showSeparator' => true,
    'delay' => 1,//This delay is how long before the message shows
    'pluginOptions' => [
        'delay' => ($message['duration']) ? $message['duration'] : 3000,//This delay is how long the message shows for
        'placement' => [
            'from' => ($message['positonY']) ? $message['positonY'] : 'top',
            'align' => ($message['positonX']) ? $message['positonX'] : 'right',
        ]
    ]
]);
?>
<?php endforeach; ?>

If you get any class not found errors please ensure you are using the proper "use" statements in your files at the top!

That’s all you have to do, enjoy!


Viewing all articles
Browse latest Browse all 3361

Trending Articles