What is your scenario for wanting to replace the default buttons? What should your buttons do, which is different from the default ones?
If you can ellaborate a bit on your scenario it will probably be easier for people to provide you with some useful answers and figure out if what you're thinking is really the best way to achieve what you want - Perhaps there is another way around it :)
thank you for your answer.
I want to trigger the event clientside with the javascript api.
The scenario is the follow:
I want to hide the preview and publish button.
Instead, I want to show two buttons:
schedule newsletter and send newsletter.
If you click on schedule newsletter, the tab should change to the property-tab, where the user should enter the publish at date. The text of the "send newsletter" changes to "save scheduled newsletter".
When you click on the "send newsletter", in dependence of the text, the save event or the save and publish event should be triggered.
I've just done similar - replaced the save and preview button with a preview button, to separate the save and preview actions (there's a whole backstory as to why, which isn't relevant).
I've done this by creating an HttpInterceptor, which matches on the request URL - footer-content-right.html - and replaces that value with a path to the view I want to use instead of the default.
That view has a controller from which I trigger the preview, without first saving the document as the Umbraco default action does. The view is essentially a copy of the Umbraco default, but we have different actions in the controller (ie we don't call the save function before opening the preview window).
We've also used interceptors to hide elements from particular user types, by replacing the view with an empty div element. Means we can make customisations without touching the Umbraco source.
INTERCEPTOR
(function () {
// replace the editor buttons - save and preview becomes preview and no long performs the save action.
function preview($q, $rootScope) {
return {
request: function (request) {
if (request.url.toLowerCase().indexOf('footer-content-right') !== -1) {
if (location.href.indexOf('content') !== -1) {
request.url = '/path/to/custom/view.html';
}
return request || $q.when(request);
}
}
}
angular.module('umbraco').factory('previewInterceptor', ['$q', '$rootScope', preview]);
angular.module('umbraco')
.config(function ($httpProvider) {
$httpProvider.interceptors.push('previewInterceptor');
});
})();
We do this from a package that includes a few interceptions, and also injects other backoffice services that we use through the site.
This is on 7.4.2 - just had a look in a 7.1.x site, the backoffice is delivered quite differently, so the view request I'm intercepting doesn't actually exist, the html for the entire editor view is returned in a single request. Which means my approach won't work.
You might be able to remove the save+publish button from the DOM, and add your own, which hook into the existing backoffice APIs?
In addition to Nathans good post I just remembered that Matt Brailsford wrote something about interceptors in last years 24 days in umbraco advent calendar - That might also be a source of inspiration - You can read it here http://24days.in/umbraco/2015/umbraco-7-back-office-tweaks/
the redirect of the common button view to a custom works great, but how can I depend the redirect to a certain doctype.
Example:
if(ONLY CERTAIN DOCTYPE) <- here I don't know how to determine the doctype
{
if (request.url.toLowerCase().indexOf('footer-content-right') !== -1) {
if (location.href.indexOf('content') !== -1) {
request.url = '/App_Plugins/tweaks/views/newsletterButtons.html';
}
}
}
To determine the doctype at the request stage, you'd have to make an extra call to the server which does just that: return the doctype for a certain id. You'll have to build your own endpoint for this.
However, at te response stage, you could easily take the doctype from the call to the /umbraco/backoffice/umbracoapi/content/getbyid endpoint.
You can get the doctype from response.data.contentTypeAlias or response.data.documentype.alias.
Of course at this point you'd have to resort to DOM manipulations to achieve your goals, as most of the content and views have already been fetched.
Here is a short example which will hide the action buttons at the bottom-right corner. This is just a quick example, it's not production worthy code.
angular
.module('umbraco')
.factory('contentItemInterceptor',
function ($q, $rootScope) {
return {
response: function (response) {
var url = response.config.url.toLowerCase();
if (url.indexOf("/umbraco/backoffice/umbracoapi/content/getbyid") === 0) {
if (response.data.contentTypeAlias === "DocTypeToCheck") {
setTimeout(function() { //you'll probably want a better way to do this in production :P
$(".umb-editor-drawer-content__right-side").empty();
}, 10);
}
}
return response;
}
}
}
);
angular
.module('umbraco')
.config(function ($httpProvider) {
$httpProvider.interceptors.push('contentItemInterceptor');
});
Custom Save and Publish Button
Hi,
I want to exchange the Preview, Save and Save and Publish Buttons with my own buttons to provide some functionalities.
It should be done only for one special documenttype, not for all d-types.
And I have to trigger the save and the save and publish event by javascript api.
Is there a way to code this?
Hi Thomas
What is your scenario for wanting to replace the default buttons? What should your buttons do, which is different from the default ones?
If you can ellaborate a bit on your scenario it will probably be easier for people to provide you with some useful answers and figure out if what you're thinking is really the best way to achieve what you want - Perhaps there is another way around it :)
Perhaps you can make use of hooking into events instead when you're dealing with a particular document type for instance if you have not explored this option already? https://our.umbraco.org/documentation/Reference/Events/ContentService-Events
/Jan
Hi, Jan,
thank you for your answer. I want to trigger the event clientside with the javascript api.
The scenario is the follow:
I want to hide the preview and publish button. Instead, I want to show two buttons:
schedule newsletter and send newsletter. If you click on schedule newsletter, the tab should change to the property-tab, where the user should enter the publish at date. The text of the "send newsletter" changes to "save scheduled newsletter". When you click on the "send newsletter", in dependence of the text, the save event or the save and publish event should be triggered.
Hi Thomas
I've just done similar - replaced the save and preview button with a preview button, to separate the save and preview actions (there's a whole backstory as to why, which isn't relevant).
I've done this by creating an HttpInterceptor, which matches on the request URL -
footer-content-right.html- and replaces that value with a path to the view I want to use instead of the default.That view has a controller from which I trigger the preview, without first saving the document as the Umbraco default action does. The view is essentially a copy of the Umbraco default, but we have different actions in the controller (ie we don't call the save function before opening the preview window).
We've also used interceptors to hide elements from particular user types, by replacing the view with an empty div element. Means we can make customisations without touching the Umbraco source.
INTERCEPTOR
We do this from a package that includes a few interceptions, and also injects other backoffice services that we use through the site.
Hi Nathan.
I can't find
footer-content-right.htmlanywhere in my entire project.What version are you running?
Hi Rune
This is on 7.4.2 - just had a look in a 7.1.x site, the backoffice is delivered quite differently, so the view request I'm intercepting doesn't actually exist, the html for the entire editor view is returned in a single request. Which means my approach won't work.
You might be able to remove the save+publish button from the DOM, and add your own, which hook into the existing backoffice APIs?
Ok. Thanks for checking :) I'm currently running 7.3.4 on this setup. And it's as you described, one big file.
That might be a solution yes.
We're regularly doing updates so I might just read up on the new changes and push it through and use this approach straight away.
Thanks.
In addition to Nathans good post I just remembered that Matt Brailsford wrote something about interceptors in last years 24 days in umbraco advent calendar - That might also be a source of inspiration - You can read it here http://24days.in/umbraco/2015/umbraco-7-back-office-tweaks/
/Jan
Hey, guys,
thank you very much. This really helps a lot. High 5 to both of you.
Hi guys,
the redirect of the common button view to a custom works great, but how can I depend the redirect to a certain doctype.
Example:
A bit late to the party, but for what it's worth:
To determine the doctype at the request stage, you'd have to make an extra call to the server which does just that: return the doctype for a certain id. You'll have to build your own endpoint for this.
However, at te response stage, you could easily take the doctype from the call to the
/umbraco/backoffice/umbracoapi/content/getbyidendpoint. You can get the doctype fromresponse.data.contentTypeAliasorresponse.data.documentype.alias. Of course at this point you'd have to resort to DOM manipulations to achieve your goals, as most of the content and views have already been fetched.Here is a short example which will hide the action buttons at the bottom-right corner. This is just a quick example, it's not production worthy code.
is working on a reply...