I'm working with the Backpack crud 3.2. in Laravel 5.4.
What I need is to add a new custom button inside the list.blade.php near to the Edit and Delete button. And to link another view to the new button.
I had gone through the lines inside the list.blade.php.
I know there are blade files for each buttons,fields and views. But even I couldn't find how these Edit and Delete button were added?
Could anyone help with an idea?
In CURD controller, you can create button here :
public function setup()
{
..............
// ------ CRUD BUTTONS
// possible positions: 'beginning' and 'end'; defaults to 'beginning'
for the 'line' stack, 'end' for the others;
// $this->crud->addButton($stack, $name, $type, $content, $position);
// add a button; possible types are: view, model_function
..............
}
You can see more : https://laravel-backpack.readme.io/v3.0/docs/crud-buttons
Related
we just integrated timber into our acf-gutenberg-block setting, and we love it. ;)
There is one thing that doesnt work.
Our ACF Blocks have prefilled values like a "dummy" headline.
But when a backend user adds a block into the gutenberg view, the get_fields() inside our render_callback function is empty. The user then changes the headline and then get_fields brings up all the fields and their values.
any idea how to fix this problem on the first load of an acf block?
the callback function looks like this (just like the one in the documentation)
function my_acf_block_render_callback($block, $content = '', $is_preview = false)
{
$context = Timber::context();
// Store block values.
$context['block'] = $block;
// Store field values.
$context['fields'] = get_fields();
// Value for detecting editor-view in twig (like is admin())
$context['is_preview'] = $is_preview;
// Render the block.
Timber::render('blocks/' . $block['template-name'] . '.html.twig', $context);
}
cheers,
ToM
I am trying to add a few custom fields to the edit.php page ( Post List Page )
It is a few settings like asking the user whether post must be displayed in 2,3 or 4 columns w, and I specifically want it on this page.
I have found a way to add content with a function to the right place without editing the wp-admin/edit.php or wp-admin/custom-header.php
add_action( 'load-edit.php', function(){
$screen = get_current_screen();
if( 'edit-post' === $screen->id )
{
add_action( 'all_admin_notices', function(){
echo '<h2> === Add ACF Fields here === </h2>';
});
});
i am also halfway in adding a location rule in ACF:
add_filter('acf/location/rule_types', 'acf_location_rules_types');
function acf_location_rules_types( $choices ) {
$choices['Post']['post_edit_screen'] = 'Post Edit Screen';
return $choices;
}
But how do now create a location rule to show my ACF fields here?
Thank you
I spent hours trying to extend the ACF_Location class without success.
The ACF Extended WordPress plugin provides the desired functionality.
You can find the GitHub repo here.
I believe this is the class that extends the ACF location functionality we both needed. #see acfe_location_post_type_archive class here
I want to add a custom drop down in tiny mce editor, I am using yii framework and using a yii plugin to integrate the editor
You haven't added any details in your question but since you are a new
bee here and SO Code of Conduct
has been revised to be more nice and humble towards newcomers, so I am
adding the answer for you, do go through the How to Ask a
Question? before posting a
question next time.
You can add the dropdown in the TinyMCE using setup option which takes a callback function with a parameter editor which holds the editor instance, and then you need to call the editor.addButton(label, options) with the options to create the custom dropdown button.
As you have not added any details in the question like what are the options that you are going to display in the dropdown so, I will assume here as usernames from the database in the variable $users.
Steps to Implement
First, we will convert $users array to js array by using yii\helpers\Json::encode().
Iterate that array to create the drop-down options with onclick event to insert the content to the editor.
Use editor.addButton('users',options) to create a button of type dropdown with label users to be later used when initializing the editor toolbar buttons.
Add the following code on top of the view
$usersList = \yii\helpers\Json::encode($users);
$tinyMCECallback = <<< JS
function (editor) {
let usersList = $usersList;
let options = [];
//iterate the user array and create the options with text and
//onclick event to insert the content on click to the editor
$.each(usersList, function(label, mapping) {
options.push({
text: label,
onclick: function() { tinymce.activeEditor.insertContent(label); }
});
});
//add the dropdown button to the editor
editor.addButton('users', {
type: 'menubutton',
text: 'Users',
icon: false,
menu: options
});
}
JS;
Now all you need to do is to pass the $tinyMCECallback to the setup option of the tinyMCE widget, if you are using the active form you code should be like below.
Note: Don't forget to add the users label of the button to the toolbar options, or if you change it in the javascript code change it accordingly in the editor toolbar options otherwise it won't show up
<?php
echo $form->field(
$model, 'body'
)->widget(
TinyMce::class, [
'options' => ['rows' => 10],
'language' => 'en',
'clientOptions' => [
'menubar' => false,
'statusbar' => false,
'toolbar' => "undo redo | users",
'setup' => new \yii\web\JsExpression($tinyMCECallback),
],
]
);
?>
$(function() {
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
// file; it is included here to show how you can modify the default classes
$.tablesorter.themes.bootstrap = {
// these classes are added to the table. To see other table classes available,
// look here: http://getbootstrap.com/css/#tables
table : 'table table-bordered table-striped',
caption : 'caption',
// header class names
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
sortNone : '',
sortAsc : '',
sortDesc : '',
active : '', // applied when column is sorted
hover : '', // custom css required - a defined bootstrap style may not override other classes
// icon class names
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
footerRow : '',
footerCells : '',
even : '', // even row zebra striping
odd : '', // odd row zebra striping
sortMultiSortKey: 'shiftKey',
};
$('#resetsort').click(function(e) {
$("#receipts").trigger('sortReset').trigger('applyWidgets');
return false;
});
// call the tablesorter plugin and apply the uitheme widget
$("#receipts").tablesorter({
// this will apply the bootstrap theme if "uitheme" widget is included
// the widgetOptions.uitheme is no longer required to be set
theme : "blue",
widthFixed: true,
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
widgets : [ "uitheme", "filter", "zebra" ],
widgetOptions : {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra : ["even", "odd"],
// reset filters button
filter_reset : ".reset",
// extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: "form-control",
// set the uitheme widget to use the bootstrap theme class names
// this is no longer required, if theme is set
// ,uitheme : "bootstrap"
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".ts-pager"),
// target the pager page select dropdown - choose a page
cssGoto : ".pagenum",
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// output string - default is '{page}/{totalPages}';
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
});
});
function yeah() {
return confirm('Are you sue you want to delete?');
$("#receipts").trigger('applyWidgets');
return false;
}
Hi,
Newbie here running Tablesorter also with Filter & Sort. Everything working perfectly (including reset buttons). As a bit of background, Im using a DotNet Nuke site with a module that delivers the rows of data.
Part of each row is a hyperlink that fires deleting a row. It also includes a section where I can insert some JavaScript.
Problem is when I delete a row, the zebra widget doesn't work. (All rows are white)
Other part of pressing the delete hyperlink is that Are you sure message come up.
My understanding is best approach here is to create a function since 2 actions need to be performed.
Function Yeah is my attempt. The page also has a resetsort button which works fine.
Ive tried putting my function just below the resetsort button but that didnt have any effect.
Thanks in advance for any assistance in getting this function going.
The sortReset method should update the widgets automatically after being applied, so I'm not sure why it isn't happening in this case.
Anyway, when a "sortReset" is triggered, some processing needs to occur, so using "applyWidgets" immediately after won't works because there needs to be a delay.
The "sortReset" trigger does include a callback, so try this code:
$("#receipts").trigger('sortReset', [function(){
$('#receipts').trigger('applyWidgets');
}]);
I'll try to figure out why this isn't happening internally when I get some free time.
I`m trying to insert a custom link to a special page in VisualEditor toolbar. See the image below.
See Image
I googled a lot but without success. Someone please give a path...
My answer is based on the following resources:
MediaWiki core JS doc (ooui-js)
VisualEditor JS doc (+ reading code of both repositories used for VE, mediawiki/extension/VisualEditor and VisualEditor)
Also, I'm pretty sure, that there is no documented way of adding a tool to the toolbar in VE, as far as I know. Although it's possible to add a tool to a group, which is already added, mostly used for the "Insert" tool group, like in Syntaxhighlight_GeSHi). There is, probably, a much easier or "better" way of doing this :)
First, VisualEditor provides a way to load additional modules (called plugins) when the main part of VE loads (mostly, when you click the "Edit" button). The modules needs to be registered via the global variable $wgVisualEditorPluginModules (or the equivalent in extension.json, if you're using the new extension registration). In your extension registration file, you should initialize a module (with your required script files to add the tool) and add it as a VE plugin.
Example PHP (old extension registration via PHP files):
// other setup...
$wgResourceModules['ext.extName.visualeditor'] = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'extName'
'dependencies' => array(
'ext.visualEditor.mwcore',
),
'scripts' => array(
'javascripts/ve.ui.ExtNameTool.js',
),
'messages' => array(
'extname-ve-toolname',
),
);
$wgVisualEditorPluginModules[] = 'ext.extName.visualeditor';
// other setup...
extension.json (new JSON-based extension registration):
// other setup...
"ResourceModules": {
"ext.geshi.visualEditor": {
"scripts": [
"javascripts/ve.ui.ExtNameTool.js"
],
"dependencies": [
"ext.visualEditor.mwcore"
],
"messages": [
"extname-ve-toolname"
]
}
},
"VisualEditorPluginModules": [
"ext.extName.visualeditor"
],
// other setup...
Now, if VE starts, it will load your module, named ext.extName.visualeditor in this example, with the script ve.ui.ExtNameTool.js. In this script, you can now do, what ever you want. As an example, this is a way to add a new module to the end of the toolgroup list in the toolbar:
Example of ve.ui.ExtNameTool.js:
( function () {
// create a new class, which will inherit ve.ui.Tool,
// which represents one tool
ve.ui.extNameTool = function extNameTool( toolGroup, config ) {
// parent constructor
ve.ui.extNameTool.super.apply( this, arguments );
// the tool should be enabled by default, enable it
this.setDisabled( false );
}
// inherit ve.ui.Tool
OO.inheritClass( ve.ui.extNameTool, ve.ui.Tool );
// every tool needs at least a name, or an icon
// (with the static property icon)
ve.ui.extNameTool.static.name = 'extname';
// don't add the tool to a named group automatically
ve.ui.extNameTool.static.autoAddToGroup = false;
// prevent this tool to be added to a catch-all group (*),
although this tool isn't added to a group
ve.ui.extNameTool.static.autoAddToCatchall = false;
// the title of the group (it's a message key,
// which should be added to the extensions i18n
// en.json file to be translateable)
// can be a string, too
ve.ui.extNameTool.static.title =
OO.ui.deferMsg( 'extname-ve-toolname' );
// onSelect is the handler for a click on the tool
ve.ui.extNameTool.prototype.onSelect = function () {
// show an alert box only, but you can do anything
alert( 'Hello' );
this.setActive( false );
}
// needs to be overwritten, but does nothing so far
ve.ui.extNameTool.prototype.onUpdateState = function () {
ve.ui.extNameTool.super.prototype.onUpdateState.apply( this, arguments );
}
// the tool needs to be registered to the toolFactory
// of the toolbar to be reachable with the given name
ve.ui.toolFactory.register( ve.ui.extNameTool );
// add this tool to the toolbar
ve.init.mw.Target.static.toolbarGroups.push( {
// this will create a new toolgroup with the tools
// named in this include directive. The naem is the name given
// in the static property of the tool
include: [ 'extname' ]
} );
} )();
After installing the extension in your LocalSettings.php and starting VE, you should see a new tool in the toolbar with the given name. Clicking it will show an alert box with content "Hello". Like written in the inline comments: In the click handler (onSelect) you can do whatever you want, e.g. open a link in a new tab, e.g. to a Special page. To get the link to a special page I would suggest to use mw.Title to get a localized namespace. For example:
var relativeUrl = mw.Title.newFromText( 'RecentChanges', -1 ).getUrl();
The first parameter of mw.Title.newFromText() is the name of the page, the second parameter is the ID of the namespace (-1 is the default for special pages and should always work).
I hope that helps!
I am not sure I understand your question entirely. It is as simple as selecting some text, clicking the chain icon, then clicking the External Link tab and pasting your link there.