diff --git a/14/umbraco-cms/extending-cms/backoffice-tours.md b/14/umbraco-cms/extending-cms/backoffice-tours.md index 80c29987676..e9f1e325125 100644 --- a/14/umbraco-cms/extending-cms/backoffice-tours.md +++ b/14/umbraco-cms/extending-cms/backoffice-tours.md @@ -4,6 +4,10 @@ description: A guide configuring backoffice tours in Umbraco # Backoffice Tours +{% hint style="warning" %} +This article is a work in progress and will be updated after Umbraco 14 release. +{% endhint %} + Backoffice Tours are a way to create helpful guides for how to work in the Umbraco backoffice. They are managed in a JSON format and stored in files on disk. The filenames should end with the `.json` extension. @@ -12,10 +16,10 @@ They are managed in a JSON format and stored in files on disk. The filenames sho The tour functionality will load information from multiple locations. -* **Core tours** +* **Core tours** The tour that ship with Umbraco are embedded into the CMS assemblies. -* **Custom tours** +* **Custom tours** Custom tours need to be added as custom plugin/package. The custom json tour file needs to be added in `/App_Plugins//backoffice/tours`. The custom tours can be added independently, or [as part of a plugin/package](packages/creating-a-package.md). @@ -58,31 +62,31 @@ Example tour configuration object: Below is an explanation of each of the properties on the tour configuration object: -* **name** +* **name** This is the name that is displayed in the help drawer for the tour. ![Tour name highlighted](../../../10/umbraco-cms/extending/images/tourname-v8.png) -* **alias** +* **alias** The unique alias of your tour. This is used to track the progress a user has made while taking a tour. The progress information is stored in the `TourData` column of the `UmbracoUsers` table in the database. -* **group** +* **group** The group property is used to group related tours in the help drawer under a common subject (for example Getting started). ![Tour group highlighted](../../../10/umbraco-cms/extending/images/tourgroup-v8.png) -* **groupOrder** +* **groupOrder** This is used to control the order of the groups in the help drawer. This must be an integer value. -* **allowDisable** +* **allowDisable** A boolean value that indicates if the "Don't show this tour again" should be shown on the tour steps. If the user clicks this link the tour will no longer be shown in the help drawer. ![Tour allow disable link highlighted](../../../10/umbraco-cms/extending/images/tourallowdisable-v8.png) -* **culture** +* **culture** You have the option to set a culture, such as nl-NL. This tour will exclusively be displayed to users who have set this culture in their profile. -* **contentType** +* **contentType** Use this property if you want to limit the tour to a specific content type. To create a tour for content nodes using the Home Page, set the `contentType` property with the alias `homePage`. @@ -96,10 +100,10 @@ Below is an explanation of each of the properties on the tour configuration obje 2. "Setup the Search Engine Optimization (SEO)" is available because the content type uses the `SEO` composition, which is associated with a specific tour. When the `contentType` property is set, the tour will **not** show as part of any groups. -* **requiredSections** +* **requiredSections** This is an array of section aliases that a user needs to have access to in order to see the tour. If the user does not have access to all the sections the tour will not be shown in the help drawer. For example if a user lacks access to Settings but has access to Content and Media, the tour requiring all three will not be shown. -* **steps** +* **steps** This is an array of tour step JSON objects that a user needs to take to complete the tour. @@ -128,20 +132,20 @@ Example tour step object: Below is an explanation of each of the properties on the tour step object. -* **title** +* **title** This the title shown on the tour step. ![Tour step highlighted](../../../10/umbraco-cms/extending/images/steptitle-v8.png) -* **content** +* **content** This text will be shown on the tour step, it can contain HTML markup. ![Tour content highlighted](../../../10/umbraco-cms/extending/images/stepcontent-v8.png) -* **type** +* **type** The type of step. Currently, only one type is supported : "intro". This will center the step and show a "Start tour" button. -* **element** +* **element** A CSS selector for the element you wish to highlight. The tour step will position itself near the element. @@ -157,32 +161,32 @@ Below is an explanation of each of the properties on the tour step object.
-* **elementPreventClick** +* **elementPreventClick** Setting this to true will prevent JavaScript events from being bound to the highlighted element. A "Next" button will be added to the tour step. As an example, it is useful when you would like to highlight a button, but would like to prevent the user clicking it. -* **backdropOpacity** +* **backdropOpacity** A decimal value between 0 and 1 to indicate the transparency of the background overlay. -* **event** +* **event** The JavaScript event that is bound to the highlighted element that should trigger the next tour step for example click, hover, etc. If not set or omitted a "Next" button will be added to the tour. -* **view** +* **view** Here you can enter a path to your own custom AngularJS view that will be used to display the tour step. This is useful if you would like to validate input from the user during the tour step. -* **eventElement** +* **eventElement** A CSS selector for the element you wish to attach the JavaScript event. Highlighting a larger section of the backoffice while encouraging users to click on a specific element can be useful.. If not set, the selector in the element property will be used. The image below shows the entire tree highlighted, but requires the user to click on a specific tree element. ![Step eventElement highlighted](../../../10/umbraco-cms/extending/images/step-event-element-v8.png) -* **customProperties** +* **customProperties** A JSON object that is passed to the scope of a custom step view, so you can use this data in your view with `$scope.model.currentStep.customProperties`. diff --git a/14/umbraco-cms/extending-cms/backoffice-ui-api-documentation.md b/14/umbraco-cms/extending-cms/backoffice-ui-api-documentation.md index e46745f8625..168da60da05 100644 --- a/14/umbraco-cms/extending-cms/backoffice-ui-api-documentation.md +++ b/14/umbraco-cms/extending-cms/backoffice-ui-api-documentation.md @@ -10,13 +10,9 @@ We have gathered all information and resources about the project in one place, g You can find it all on [docs.umbraco.com/umbraco-backoffice](https://docs.umbraco.com/umbraco-backoffice). {% endhint %} -## [Backoffice UI](https://apidocs.umbraco.com/v13/ui) +## [Backoffice UI](https://apidocs.umbraco.com/v14/ui) -Angular, JavaScript, CSS & Less UI API references for building Umbraco backoffice components. V10 is using minified versions of the following files: - -* The umbraco.directives -* The umbraco.services -* The umbraco.resources +JavaScript, CSS & Less UI API references for building Umbraco backoffice components. {% hint style="info" %} Opens a documentation browser that is different from the documentation section you're viewing now. diff --git a/14/umbraco-cms/reference/angular/README.md b/14/umbraco-cms/reference/angular/README.md deleted file mode 100644 index 391da91c9b9..00000000000 --- a/14/umbraco-cms/reference/angular/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# AngularJS - -The Umbraco backoffice is built using AngularJS. The implementation is made up of many directives and services. - -{% hint style="warning" %} -**As of Umbraco 10, this section will no longer be updated.** - -Please refer to the [Backoffice UI API Documentation](../../extending/backoffice-ui-api-documentation.md) article instead. - -For any questions regarding the above, feel free to reach out at [docs@umbraco.com](mailto:docs@umbraco.com). - -You can also raise an issue on the [official UmbracoDocs GitHub Issue Tracker](https://github.com/umbraco/UmbracoDocs/issues). -{% endhint %} - -Generally, you can find information about these via the [Backoffice UI API documentation](https://apidocs.umbraco.com/v13/ui). This part of the documentation is auto-generated from the Umbraco source code. - -Below you can find more in-depth descriptions and examples of AngularJS directives and services. - -## Directives - -* [Layout selector](directives/umblayoutselector.md) (``) -* [Load indicator](directives/umbloadindicator.md) (``) -* [Property](directives/umbproperty.md) (``) - -## Services - -* [Editor service](services/editorservice.md) -* [Events service](services/eventsservice/) diff --git a/14/umbraco-cms/reference/angular/directives/README.md b/14/umbraco-cms/reference/angular/directives/README.md deleted file mode 100644 index 404e1da9de9..00000000000 --- a/14/umbraco-cms/reference/angular/directives/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Directives - -- [Layout selector](umblayoutselector.md) (``) -- [Load indicator](umbloadindicator.md) (``) -- [Property](umbproperty.md) (``) diff --git a/14/umbraco-cms/reference/angular/directives/images/umbLayoutSelector.png b/14/umbraco-cms/reference/angular/directives/images/umbLayoutSelector.png deleted file mode 100644 index b3cc9b5f64b..00000000000 Binary files a/14/umbraco-cms/reference/angular/directives/images/umbLayoutSelector.png and /dev/null differ diff --git a/14/umbraco-cms/reference/angular/directives/images/umbLoadIndicator.gif b/14/umbraco-cms/reference/angular/directives/images/umbLoadIndicator.gif deleted file mode 100644 index 66e74e371e6..00000000000 Binary files a/14/umbraco-cms/reference/angular/directives/images/umbLoadIndicator.gif and /dev/null differ diff --git a/14/umbraco-cms/reference/angular/directives/umblayoutselector.md b/14/umbraco-cms/reference/angular/directives/umblayoutselector.md deleted file mode 100644 index 59eb9b108b0..00000000000 --- a/14/umbraco-cms/reference/angular/directives/umblayoutselector.md +++ /dev/null @@ -1,64 +0,0 @@ -# umbLayoutSelector - -When you have a list of items, you can use the `umb-layout-selector` directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table). - -![Example of the layout selector](../../../../../10/umbraco-cms/reference/angular/directives/images/umbLayoutSelector.png) - -The directive has three attributes: - -* `layouts` is used to indicate the available layouts that the user should be able to select. -* `active-layout` is a reference to the layout currently being used. -* `on-layout-select` is a callback function triggered when the user chooses another layout. - -For a view utilizing this directive: - -* The HTML could look something like this: - - ```html -
- - -
- ``` -* You'd also need a controller for initializing the different values to be used for the directive: - - ```js - angular.module("umbraco").controller("myController", function ($scope) { - - // Declare the available layouts - $scope.layouts = [ - { - name: "Grid", - icon: "icon-thumbnails-small", - path: "gridpath", - selected : true - }, - { - name: "List", - icon: "icon-list", - path: "listpath", - selected: true - } - ]; - - // Declare the function called by the directive when user chooses another layout - $scope.selectLayout = function(layout) { - $scope.activeLayout = layout; - $scope.layouts.forEach(element => element.active = false); - layout.active = true; - }; - - // Select the first layout - $scope.selectLayout($scope.layouts[0]); - - }); - ``` - -For each layout: - -* `name` property indicates the visual name of the layout (eg. used when hovering over the layout in the selector) -* `icon` is the CSS selector for the icon of the layout. -* `path` attribute indicates a sort of alias, and is used internally for comparing the layouts. -* Each layout should also have a `selected` property indicating whether a particular layout is enabled, and thereby visible in the selector. diff --git a/14/umbraco-cms/reference/angular/directives/umbloadindicator.md b/14/umbraco-cms/reference/angular/directives/umbloadindicator.md deleted file mode 100644 index 3d7a025aa57..00000000000 --- a/14/umbraco-cms/reference/angular/directives/umbloadindicator.md +++ /dev/null @@ -1,30 +0,0 @@ -# umbLoadIndicator - -Many web sites and web applications use a form of load indicator to indicate a busy state to the user. Throughout the backoffice, Umbraco uses three animated circles as a load indicator - eg. as shown below: - -![Example of the load indicator](../../../../../10/umbraco-cms/reference/angular/directives/images/umbLoadIndicator.gif) - -Umbraco internally does this via the `` directive, which you can also use in your own views for the backoffice. - -* [`` in the **API documentation**](https://apidocs.umbraco.com/v12/ui/#/api/umbraco.directives.directive:umbLoadIndicator) -* [`` source code on **GitHub**](https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/common/directives/components/umbloadindicator.directive.js) - -The directive doesn't have any parameters on it's own. Since you most likely only wish to show the load indicator during certain states of your code, you can control this either through `ng-if` or `ng-show`. - -For instance if your controller sets the `loading` variable to `true` during busy states: - -```html - -``` - -The directive uses CSS and absolute position to center it self in. For instance, if you're also using the `` directive, you can set it's position to `relative`: - -```html - - - - - -``` - -As seen on the animation in the beginning of this page, the load indicator is centered in the white box. diff --git a/14/umbraco-cms/reference/angular/directives/umbproperty.md b/14/umbraco-cms/reference/angular/directives/umbproperty.md deleted file mode 100644 index b63db509ee4..00000000000 --- a/14/umbraco-cms/reference/angular/directives/umbproperty.md +++ /dev/null @@ -1,29 +0,0 @@ -# umbProperty - -The [umb-property](https://apidocs.umbraco.com/v12/ui#/api/umbraco.directives.directive:umbProperty) directive can along with [umb-property-editor](https://apidocs.umbraco.com/v12/ui#/api/umbraco.directives.directive:umbPropertyEditor) be used for rendering property editors in the backoffice. - -The two directives are typically used together. For instance, if your Angular model has an array of properties, your view could look something like: - -```html - - - -``` - -`Properties` contains the model for each property. `ng-repeat` can be used to iterate over each property, passing them to the two directives via `property` and `model` attributes. - -For a basic property with a textbox, the model for the property can be defined as: - -```javascript -var property = { - alias: "myProperty", - label: "My property", - description: "This is my property.", - value: "Cupcake ipsum dolor sit amet oat cake marzipan...", - view: "textbox" -}; -``` - -The `view` property specifies the URL to the property editor that should be used for this property. To use one of the built-in property editors in Umbraco, you can specify the alias (eg. `textbox`) rather than the full URL to the view (eg. `/umbraco/Views/propertyeditors/textbox/textbox.html`). - -You can see a list of all the built-in property editors in the [propertyeditors folder on GitHub](https://github.com/umbraco/Umbraco-CMS/tree/v9/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors). diff --git a/14/umbraco-cms/reference/angular/services/README.md b/14/umbraco-cms/reference/angular/services/README.md deleted file mode 100644 index 3352b78c7e0..00000000000 --- a/14/umbraco-cms/reference/angular/services/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Services - -- [**Editor service**](editorservice.md) - Service for opening and working with editors and overlays. - -- [**Events service**](eventsservice/) - Service for listening and sending broadcasts. diff --git a/14/umbraco-cms/reference/angular/services/editorservice.md b/14/umbraco-cms/reference/angular/services/editorservice.md deleted file mode 100644 index 79381ca286a..00000000000 --- a/14/umbraco-cms/reference/angular/services/editorservice.md +++ /dev/null @@ -1,79 +0,0 @@ -# Editor Service - -The Angular `editorService` service is the primary resource used for opening overlays and handling infinite editing. Besides the `open` and `close` functions, the service also contains functions for opening specialized overlays/editors - eg. `contentPicker` or `mediaPicker`. - -## Content Picker - -The `contentPicker` function opens a Content Picker in infinite editing. Depending on the options, it may be used for picking a single content item or a set of content items. Options for the function is as following: - -| Alias | Description | -|-----------------|-------------| -| **multiPicker** | Indicates a boolean value for whether the editor should work as a single Content Picker (`false`) or a Multi Content Picker (`true`). | -| **submit** | Is a callback function when the user selects and submits one or more content items. | -| **close** | Is a callback function when the close button is clicked. | - -The Content Picker could be opened as: - -```js -editorService.contentPicker({ - multiPicker: true, - submit: function(model) { - model.selection.forEach(item, function() { - console.log(item.name); - }); - editorService.close(); - }, - close: function() { - editorService.close(); - } -}); -``` - -This example snippet will open a new Multi Content Picker. If the user submits one or more content items, the name of each content item will be printed to the console. The user may also close the Content Picker without selecting any content items, in which case the `close` callback function is invoked. - -## Document Type Editor - -The `documentTypeEditor` function of the editor service can be used for opening a new overlay for either creating a new Document Type or editing an existing Document Type. - -The function supports the following options: - -| Alias | Description | -|----------------|-------------| -| **id** | Indicates the numeric ID of the Document Type which should be opened for editing. | -| **create** | A boolean value indicating whether the overlay should be used for creating a new Document Type (opposed to editing an existing Document Type). | -| **noTemplate** | When part of a create-overlay, this option specifies whether the Document Type should be created without a corresponding Template. | -| **submit** | A callback function for when the user submits/saves the Document Type. | -| **close** | A callback function for when the close button is clicked. | - -An overlay for creating a new Document Type may be opened as: - -```javascript -editorService.documentTypeEditor({ - id: -1, - create: true, - submit: function (model) { - console.log(model.documentTypeAlias); - editorService.close(); - }, - close: function () { - editorService.close(); - } -}); -``` - -Notice that both the `id` and `create` options must be specified. When the overlay submits, you'll be able to get the alias of the created Document Type through `model.documentTypeAlias`. - -Opening an overlay for editing an existing Document Type can be opened as: - -```javascript -editorService.documentTypeEditor({ - id: 1103, - submit: function (model) { - console.log(model.documentTypeAlias); - editorService.close(); - }, - close: function () { - editorService.close(); - } -}); -``` diff --git a/14/umbraco-cms/reference/angular/services/eventsservice/README.md b/14/umbraco-cms/reference/angular/services/eventsservice/README.md deleted file mode 100644 index ba7b39da677..00000000000 --- a/14/umbraco-cms/reference/angular/services/eventsservice/README.md +++ /dev/null @@ -1,343 +0,0 @@ -# Events Service - -The events service allows different components in Umbraco to broadcast and listen for global events. - -## Using the events service in your custom code - -### Broadcasting an event - -To broadcast an event, you can use the `emit` function. It takes two arguments, where the first is the name of the event - eg. `featured.updated`, and the second argument is an object or similar describing the event. - -The second argument is optional, so if your use case doesn't need this, feel free to skip this argument. - -The illustrate this function, you could have a controller with an `updated` function that is triggered by the view. In this dummy example, the function will increment the value of a property editor, and then use the events service to broadcast that the value was updated: - -```javascript -angular.module("umbraco").controller("MyController", function($scope, eventsService) { - - $scope.updated = function() { - $scope.model.value++; - eventsService.emit("feature.updated", { value: $scope.model.value }); - }; - -}); -``` - -### Listening for an event - -Another controller could then listen for broadcasts of your `feature.updated` event via the events service's `on` function, which takes the name of the event as the first argument, and a callback function as the second argument. - -Then in the callback function, the first argument is the event it self, and the second argument is the object we pass on to the `emit` function when we're broadcasting: - -```javascript -angular.module("umbraco").controller("MyOtherController", function($scope, eventsService) { - - $scope.count = 0; - - // Subscribe to the event - var unsubscribe = eventsService.on("feature.updated", function(event, args) { - $scope.count = args.value; - }); - - // When the scope is destroyed we need to unsubscribe - $scope.$on("$destroy", function () { - unsubscribe(); - }); - -}); -``` - -#### Listening for events globally - -Controllers are typically used by a specific component, so the controller will only be executed when such a component is inserted into the DOM. The controller will be executed for each component, so you may end of with multiple instances listening for the same event. - -If you need to listen for events on a more global level, you can hook into the application startup using `app.run(...)`: - -```javascript -app.run(function (eventsService) { - - $scope.count = 0; - - // Subscribe to the event - var unsubscribe = eventsService.on("feature.updated", function(event, args) { - $scope.count = args.value; - }); - -}); -``` - -### Unsubscribing from an event - -Notice how the result of the `on` function is saved in an `unsubscribe` variable. When we add a listener via the `on` function, it's important to clean up after our selves when our component (here a controller) no longer exists - eg. when removed from the DOM. - -In Angular, we can listen for the `$destroy` event in the current scope, and then unsubscribe from the events service by calling the `unsubscribe` variable as a function. - -Alternatively, we could replace `unsubscribe()` with `eventsService.unsubscribe(unsubscribe)`, but it does the same thing - so calling the variable as a function directly may be preferred as it's shorter. - -## Events in Umbraco - -Below you'll find a list of events broadcasted by the Umbraco codebase. The list may not be complete, so please help updating the list should you find an event that isn't listed. - -### Umbraco application - -#### Init - -**When the Umbraco application is ready** - -```javascript -eventsService.emit("app.ready", data); -``` - -#### Security interceptor - -When Umbraco our your custom code makes a request to the server via the `$http` service, Umbraco listens for the `x-umb-user-modified` header in the response. In can be used to tell the Umbraco backoffice that the current user has been modified, in which case Umbraco knows that it should refetch the user data. - -```javascript -if (headers["x-umb-user-modified"]) { - eventsService.emit("app.userRefresh"); -} -``` - -### Services - -#### Clipboard service - -**When the clipboard in local storage is updated** - -```js -eventsService.emit("clipboardService.storageUpdate"); -``` - -#### Editor service - -**When an editor is opened** - -```javascript -var args = { - editors: editors, - editor: editor -}; - -eventsService.emit("appState.editors.open", args); -``` - -**When an editor is closed** - -```javascript -var args = { - editors: editors, - editor: closedEditor -}; - -// emit event to let components know an editor has been removed -eventsService.emit("appState.editors.close", args); -``` - -**When all editors are closed** - -```javascript -var args = { - editors: editors, - editor: null -}; - -eventsService.emit("appState.editors.close", args); -``` - -#### Editor State service - -```javascript -eventsService.emit("editorState.changed", { entity: entity }); -``` - -#### Localization service - -**When the language resource file is loaded from the server** - -```javascript -eventsService.emit("localizationService.updated", response.data); -``` - -#### Overlay service - -**When an overlay is opened** - -```javascript -eventsService.emit("appState.overlay", overlay); -``` - -**When an overlay is closed** - -```javascript -eventsService.emit("appState.overlay", null); -``` - -#### TinyMCE service - -**When upload of a file starts** - -```javascript -eventsService.emit("rte.file.uploading"); -``` - -**When upload of a file ends** - -```js -eventsService.emit("rte.file.uploaded"); -``` - -**When the user presses CTRL + S** - -```js -eventsService.emit("rte.shortcut.save"); -``` - -#### Tours - -**When tours are loaded** - -```javascript -eventsService.emit("appState.tour.updatedTours", tours); -``` - -**When user starts a tour** - -```javascript -eventsService.emit("appState.tour.start", tour); -``` - -**When user ends a tour** - -```javascript -eventsService.emit("appState.tour.end", tour); -``` - -**When a tour is disabled** - -```javascript -eventsService.emit("appState.tour.end", tour); -``` - -**When user completes a tour** - -```javascript -eventsService.emit("appState.tour.complete", tour); -``` - -#### Tree service - -**When loading a tree node fails** - -```javascript -eventsService.emit("treeService.treeNodeLoadError", { error: reason }); -``` - -**When a tree node is removed** - -```javascript -eventsService.emit("treeService.removeNode", { node: treeNode }); -``` - -#### User service - -**When the user is logged out** - -```javascript -const args = { isTimedOut: isTimedOut }; -eventsService.emit("app.notAuthenticated", args); -``` - -**When user is trying to log in, but have not start nodes** - -```javascript -var result = { errorMsg: errorMsg, user: data, authenticated: false, lastUserId: lastUserId, loginType: "credentials" }; -eventsService.emit("app.notAuthenticated", result); -``` - -**When user is successfully authenticated** - -```javascript -var result = { user: data, authenticated: true, lastUserId: lastUserId, loginType: "credentials" }; -eventsService.emit("app.authenticated", result); -``` - -**When user data is refetched from the server** - -```javascript -if (args && args.broadcastEvent) { - //broadcast a global event, will inform listening controllers to load in the user specific data - eventsService.emit("app.authenticated", result); -} -``` - -#### Util service - -**When the app is initialized** - -```javascript -eventsService.emit("app.reInitialize"); -``` - -### Directives - -#### Toggle directive - -**When the toggle is initialized** - -```javascript -eventsService.emit("toggleValue", { value: scope.checked }); -``` - -**When the toggle is clicked** - -```javascript -eventsService.emit("toggleValue", { value: !scope.checked }); -``` - -### Controllers - -#### Grid controller - -**When a new row is added** - -```javascript -eventsService.emit("grid.rowAdded", { scope: $scope, element: $element, row: row }); -``` - -**When a new control is added** - -```javascript -eventsService.emit("grid.itemAdded", { scope: $scope, element: $element, cell: cell, item: newControl }); -``` - -**When the grid is initializing** - -```javascript -eventsService.emit("grid.initializing", { scope: $scope, element: $element }); -``` - -**When the grid is initialized** - -```javascript -eventsService.emit("grid.initialized", { scope: $scope, element: $element }); -``` - -#### Languages overview controller - -**When a language is deleted** - -``` -eventsService.emit("editors.languages.languageDeleted", args); -``` - -### Other - -**Setting the page title** - -Available from 8.4.0 - -``` -$scope.$emit("$changeTitle", title); -``` - -For more information see [Change title](changetitle.md) diff --git a/14/umbraco-cms/reference/angular/services/eventsservice/changetitle.md b/14/umbraco-cms/reference/angular/services/eventsservice/changetitle.md deleted file mode 100644 index c70d63bfb0e..00000000000 --- a/14/umbraco-cms/reference/angular/services/eventsservice/changetitle.md +++ /dev/null @@ -1,24 +0,0 @@ -# changeTitle - -Setting the title of the page the user is working on is important for accessibility purposes; where people using assistive technology need to know what they are maintaining. By setting the page title, people who work with multiple tabs will also find the page they were working on easily. - -To use the directive call: - -``` -$scope.$emit("$changeTitle", title); -``` - -When the user navigates through the site there is some logic which sets the default page title this is based on: - -* The current section the user is in -* The deployment environment - -![Example of the default title](../../../../../../10/umbraco-cms/reference/angular/services/eventsservice/images/defaultview.png) - -The original title of the page is based on the section being edited and the host name. - -![Example of the page title showing edit blo](../../../../../../10/umbraco-cms/reference/angular/services/eventsservice/images/editblog.png) - -The title to use will then be prefixed to the original title of the page. - -To remove the title displayed and revert to the default title, pass in an empty string. diff --git a/14/umbraco-cms/reference/angular/services/eventsservice/images/defaultview.png b/14/umbraco-cms/reference/angular/services/eventsservice/images/defaultview.png deleted file mode 100644 index 7931e5f2f51..00000000000 Binary files a/14/umbraco-cms/reference/angular/services/eventsservice/images/defaultview.png and /dev/null differ diff --git a/14/umbraco-cms/reference/angular/services/eventsservice/images/editblog.png b/14/umbraco-cms/reference/angular/services/eventsservice/images/editblog.png deleted file mode 100644 index e3efa802397..00000000000 Binary files a/14/umbraco-cms/reference/angular/services/eventsservice/images/editblog.png and /dev/null differ diff --git a/14/umbraco-cms/reference/api-documentation.md b/14/umbraco-cms/reference/api-documentation.md index cd6d6cb667d..626f54a0c6a 100644 --- a/14/umbraco-cms/reference/api-documentation.md +++ b/14/umbraco-cms/reference/api-documentation.md @@ -10,13 +10,13 @@ A library of API Reference documentation is auto-generated from the comments wit C# API references for the Umbraco Core, Infrastructure, Extensions and Web libraries. -### [Umbraco.Cms.Core](https://apidocs.umbraco.com/v13/csharp/api/Umbraco.Cms.Core.html) +### [Umbraco.Cms.Core](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.html) -### [Umbraco.Cms.Infrastructure](https://apidocs.umbraco.com/v13/csharp/api/Umbraco.Cms.Infrastructure.html) +### [Umbraco.Cms.Infrastructure](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Infrastructure.html) -### [Umbraco.Cms.Web](https://apidocs.umbraco.com/v13/csharp/api/Umbraco.Cms.Web.Common.html) +### [Umbraco.Cms.Web](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Web.Common.html) -### [Umbraco.Extensions](https://apidocs.umbraco.com/v13/csharp/api/Umbraco.Extensions.html) +### [Umbraco.Extensions](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Extensions.html) {% hint style="info" %} Opens a documentation browser that is different from the documentation section you're viewing now. @@ -24,13 +24,9 @@ Opens a documentation browser that is different from the documentation section y ## Backoffice UI API Documentation -Angular, JavaScript, CSS & Less UI API references for building Umbraco backoffice components. +JavaScript, CSS & Less UI API references for building Umbraco backoffice components. -* The umbraco.directives -* The umbraco.services -* The umbraco.resources - -### [Backoffice UI](https://apidocs.umbraco.com/v13/ui/) +### [Backoffice UI](https://apidocs.umbraco.com/v14/ui/) {% hint style="info" %} Opens a documentation browser that is different from the documentation section you're viewing now. diff --git a/14/umbraco-cms/reference/security/cookies.md b/14/umbraco-cms/reference/security/cookies.md index 62b523774d5..506b831d836 100644 --- a/14/umbraco-cms/reference/security/cookies.md +++ b/14/umbraco-cms/reference/security/cookies.md @@ -13,7 +13,6 @@ The below cookies are necessary for accessing the Umbraco Backoffice and functio | umb_installId | Used to store the Umbraco software installer id. | Session | | UMB_UPDCHK | Enables your system to check for the Umbraco software updates. | Session | | UMB-XSRF-V | Used to store the backoffice antiforgery token validation value. | Session | -| UMB-XSRF-TOKEN | Set for angular to pass in to the header value for "X-UMB-XSRF-TOKEN" | Session | | TwoFactorRememberBrowser | Default authentication type used for storing that 2FA is not needed on next login | Session | | UMB_SESSION | Preserves the visitor's session state across page requests. | Session | diff --git a/14/umbraco-cms/reference/security/external-login-providers.md b/14/umbraco-cms/reference/security/external-login-providers.md index d97429a6b0f..51e33aa2dc2 100644 --- a/14/umbraco-cms/reference/security/external-login-providers.md +++ b/14/umbraco-cms/reference/security/external-login-providers.md @@ -168,10 +168,6 @@ The configuration file is used to configure a handful of different options for t {% tabs %} {% tab title="User Authentication" %} -{% hint style="info" %} -In earlier versions of Umbraco up to version 12, the options included only a "ButtonStyle" property to style the button. In version 13+ the default button is now rendered using the Umbraco UI library. This means that the "ButtonStyle" property has been deprecated and should not be used. You can override the default styling of the button by using the "ButtonColor" and "ButtonLook" properties. We recommend leaving these properties empty to use the default styling. The default styling will give your users an optimal login experience. -{% endhint %} - {% code title="ProviderBackOfficeExternalLoginProviderOptions.cs" lineNumbers="true" %} ```csharp @@ -355,12 +351,6 @@ Additionally, more advanced custom properties can be added to the `BackOfficeExt #### BackOfficeExternalLoginProviderOptions.CustomBackOfficeView -{% hint style="warning" %} -In earlier versions of Umbraco up to version 12, this property had to define an AngularJS HTML view. This is no longer the case. You can now define a JavaScript module to render a Custom Element instead of the default external login button. - -It is still supported to load an HTML file as a view. However, Umbraco no longer supports AngularJS and the HTML file will be loaded into the DOM as-is. You will have to implement all the logic yourself. -{% endhint %} - The `CustomBackofficeView` allows for specifying a JavaScript module to render a [Custom Element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) instead default external login button. Use this in case you want to change the UI or one of the following: * You want to display something different where external login providers are listed: in the login screen vs the backoffice panel vs on the logged-out screen. This same view will render in all of these cases but you can use the current route parameters to customize what is shown.