YII Widgets

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)


Widgets are reusable building blocks on client-side (containing JavaScript, HTML and CSS). They are used to create complex and configurable user interface elements in views.

For example, a Progress widget and DatePicker widget can create a progress bar and stylist date picker in your application.

Using Widgets

Widgets are majorly used in views. To call a widget you can call,

  1. yiiaseWidget::widget()  

This method takes a configuration array for initializing the widget.

For example, the following code inserts a date picker widget configured to use Russian language.

  1. use yiijuiDatePicker;  

  2. ?>  

  3.     'model' => $model,  

  4.     'attribute' => 'from_date',  

  5.     'language' => 'ru',  

  6.     'clientOptions' => [  

  7.         'dateFormat' => 'yy-mm-dd',  

  8.     ],  

  9. ])   

  10. ?> 


In this example, we'll use progress widget.

Step 1 Create an action actionWidget() in the SiteController.php file in the frontend directory.

  1. public function actionWidget()   

  2.     {   

  3.    return $this->render('widget');   

  4.     }  

Look at the above code, we are rendering to the widget page in view folder.

Step 2 Create a page widget.php in the views/site folder in the frontend directory.

  1. <?php   
  2.    use yiiootstrapProgress;   
  3. ?>   
  4. <?= Progress::widget(['percent' => 99, 'label' => 'Loading 99%']) ?>  

Step 3 Run it on the browser with the URL,


YII Widgets 1