About
Style taken from the fabulous AdminLte bootstrap template, however,
since only using tiny portion of it, I made it standalone, all the design creadits go to there though., (*1)
https://almsaeedstudio.com/themes/AdminLTE/index2.html, (*2)
Depending also on the http://github.com/rpflorence/jQuery.addObject plugin to manage jquery objects, (*3)
Buttons are by default rendered with fa icons, I not going to add the dependency, just install them yourself or do your own buttons. For example https://github.com/rmrevin/yii2-fontawesome, (*4)
Scroll all the way down to see box reloaded with form data., (*5)
, (*6)
Fully supports grids:, (*7)
, (*8)
=Box::widget(['title'=>'Users','bodyLoad'=>['/admin/user']])?>
=Box::widget(['title'=>'Log','bodyLoad'=>['/admin/log']])?>
=Box::widget(['title'=>'Jobs','bodyLoad'=>['/admin/job']])?>
=Box::widget(['title'=>'Queue','bodyLoad'=>['/admin/queue']])?>
Installation
The preferred way to install this extension is through composer., (*9)
Either run, (*10)
php composer.phar require --prefer-dist marekpetras/yii2-ajax-box-widget "^1.0"
or add, (*11)
"marekpetras/yii2-ajax-box-widget": "^1.0"
to the require section of your composer.json file., (*12)
Usage
Two types of usages, remote or local, (*13)
Remote:, (*14)
Local:, (*15)
tools();
echo 'Tools';
// add some footer
$box->footer();
echo 'Footer';
$box->end();
?>
Possible Options:, (*16)
'My Box',
'subtitle' => 'About us',
'type' => 'info',
'invisible' => false,
'bodyLoad' => ['test/my', 'var' => 'value'],
'toolsTemplate' => '{tools} {reload} {collapse} {remove} {myButton}',
'toolsButtons' => [
'myButton' => function() {
return \yii\helpers\Html::button('my button');
},
],
'toolsButtonOptions' => [
'class' => 'myButtons',
],
'autoload' => true,
'hidden' => false,
'data' => [
'postvar1' => 123,
'postvar2' => 234,
],
'clientOptions' => [
'autoload' => true, // modify this with the general option not here though
'onerror' => new \yii\web\JsExpression('function(response, box, xhr) {console.log(response,box,xhr)}'), // loads the error message in the box by default
'onload' => new \yii\web\JsExpression('function(box, status) { console.log(box,status); }'), // nothing by default
],
'classes' => ['box', 'box-flat', 'box-init'],
'view' => '@path/to/your/view',
];
?>
Js Usage, (*17)
$('#boxId').box('reload', data); // reloads content from predefined source with, if you choose so, ammended data - good for filtering etc
$('#boxId').box('source', newSource); // sets new box source
$('#boxId').box('show|hide|toggle'); // show hide toggle using jquery
$('#boxId').box('addOverlay|removeOverlay'); // add/removes overlay indicating load
I usually overload render() in my controllers to detect ajax by itself and just load whichever action that I want properly., (*18)
request->getIsAjax() ) {
Yii::trace('Rendering AJAX');
return parent::renderAjax($view, $params);
}
else {
return parent::render($view, $params);
}
}
}
```
Sample
------
[dashboard.php](/sample/dashboard.php)
```php
<
div class="health-default-index">
'Select clients and date range']); ?>
<?=Html::beginForm(['report'],'post',['id'=>'healthcheckform','layout'=>'inline']); ?>
<div class="row">
<div class="col-sm-5">
<select>
<options>
</select>
</div>
<div class="col-sm-5">
<input type="date" />
</div>
<div class="col-sm-2">
<?=Html::submitButton('Apply',['class'=>'btn btn-primary btn-flat btn-block'])?>
</div>
</div>
<?=Html::endForm()?>
<?php $box->end()?>
<div id="report">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?=Box::widget(['invisible'=>true,'title'=>'Target Cost','bodyLoad'=>['target-vs-actual','metric'=>'Cost'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?=Box::widget(['invisible'=>true,'title'=>'Target Actions','bodyLoad'=>['target-vs-actual','metric'=>'Actions'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?=Box::widget(['invisible'=>true,'title'=>'Target CPA','bodyLoad'=>['target-vs-actual','metric'=>'CostPerAction'],'autoload'=>false,'hidden'=>true])?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-right">
<?=Box::widget(['title'=>'Highest Spending Search Queries','bodyLoad'=>['highest-spending-search-queries'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-left">
<?=Box::widget(['title'=>'Network Performance','bodyLoad'=>['network-performance'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-left">
<?=Box::widget(['title'=>'Device Performance','bodyLoad'=>['device-performance'],'autoload'=>false,'hidden'=>true])?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<?=Box::widget(['title'=>'Brand % of Spend','bodyLoad'=>['brand-spend'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<?=Box::widget(['title'=>'Match type % of Spend','bodyLoad'=>['match-type-spend'],'autoload'=>false,'hidden'=>true])?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<?=Box::widget(['title'=>'Lost Impression Share','bodyLoad'=>['lost-impression-share'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<?=Box::widget(['title'=>'Average Quality Score','bodyLoad'=>['average-quality-score'],'autoload'=>false,'hidden'=>true])?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?=Box::widget(['title'=>'Expected CTR <small>drillthrough to most contributing campaigns</small>','bodyLoad'=>['expected-ctr'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?=Box::widget(['title'=>'Ad Relevance <small>drillthrough to most contributing campaigns</small>','bodyLoad'=>['ad-relevance'],'autoload'=>false,'hidden'=>true])?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?=Box::widget(['title'=>'Landing Pages Experience <small>drillthrough to most contributing campaigns</small>','bodyLoad'=>['landing-pages-experience'],'autoload'=>false,'hidden'=>true])?>
</div>
</div>
</div>
registerJs("
$('#healthcheckform').submit(function(e){
e.preventDefault();
var data = $(this).serialize(); // this will be loaded via post on submit
$('#report .box-init').each(function(){
$(this).box('reload',data).box('show');
});
});
");?>
Wallogit.com
