Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename Admin Extension SDK to Meteor Admin SDK #1257

Merged
merged 2 commits into from
Jan 24, 2024
Merged

Rename Admin Extension SDK to Meteor Admin SDK #1257

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2487233
Rename Admin Extension SDK to Meteor Admin SDK
csteuer Jan 19, 2024
42cbf8a
Update guides/plugins/plugins/content/cms/add-cms-element-via-admin-s…
sushmangupta Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .wordlist.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ AddressBookWidget
AddressDetailPage
AddressListingPage
Adminer
AdminExtensionSDK
MeteorAdminSDK
AdministrationNewField
AdministrationNewModule
AdminQueueWorker
Expand Down
2 changes: 1 addition & 1 deletion guides/integrations-api/general-concepts/request-headers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,4 @@ POST /api/search/product

## sw-app-integration-id

The `sw-app-integration-id` enables seamless connection and data exchange between different software components. This header is required for correct permission checks performed by the backend when fetching or manipulating data. It overrides the default behavior and uses the privileges provided by the app. This is used in the Admin Extension SDK for the [Repository Data Handling](https://shopware.github.io/admin-extension-sdk/docs/guide/api-reference/data/repository). But the developer itself doesn’t need to care about it because it is handled automatically by the admin.
The `sw-app-integration-id` enables seamless connection and data exchange between different software components. This header is required for correct permission checks performed by the backend when fetching or manipulating data. It overrides the default behavior and uses the privileges provided by the app. This is used in the Meteor Admin SDK for the [Repository Data Handling](https://shopware.github.io/meteor-admin-sdk/docs/guide/api-reference/data/repository). But the developer itself doesn’t need to care about it because it is handled automatically by the admin.
8 changes: 4 additions & 4 deletions guides/plugins/apps/starter/starter-admin-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ SimpleNotification/
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/@shopware-ag/admin-extension-sdk/cdn"></script>
<script src="https://unpkg.com/@shopware-ag/meteor-admin-sdk/cdn"></script>
</head>
<script>
sw.notification.dispatch({
Expand All @@ -96,7 +96,7 @@ SimpleNotification/
This file contains the basic setup for our app to display the notification:

* The HTML is rendered in a hidden iFrame when the Administration panel is loaded.
* The Admin Extension SDK script is loaded through a CDN and exposed as the `sw` object.
* The Meteor Admin SDK script is loaded through a CDN and exposed as the `sw` object.
* We use the `notification.dispatch` SDK method to display a simple notification with a title and a message.

### Start the local development server
Expand Down Expand Up @@ -157,6 +157,6 @@ When the app is successfully installed, you will see the notification pop up onc

This example showed end-to-end how to create a local dev environment and connect it with your Shopware Store. There is a lot more to learn and try out, so why not move on with one of those topics:

* Did you know, you can add [new sections](https://shopware.github.io/admin-extension-sdk/docs/guide/api-reference/ui/component-section) to the UI or even [entire modules](https://shopware.github.io/admin-extension-sdk/docs/guide/api-reference/ui/mainModule)?
* The Admin Extension SDK also offers [TypeScript support](https://shopware.github.io/admin-extension-sdk/docs/guide/getting-started/installation#using-npm-require-bundling) (including autocompletion)
* Did you know, you can add [new sections](https://shopware.github.io/meteor-admin-sdk/docs/guide/api-reference/ui/component-section) to the UI or even [entire modules](https://shopware.github.io/meteor-admin-sdk/docs/guide/api-reference/ui/mainModule)?
* The Meteor Admin SDK also offers [TypeScript support](https://shopware.github.io/meteor-admin-sdk/docs/guide/getting-started/installation#using-npm-require-bundling) (including autocompletion)
* Don't want to extend the admin panel? Have a look at [App Scripts](/docs/guides/plugins/apps/app-scripts/index.md)
28 changes: 14 additions & 14 deletions guides/plugins/plugins/content/cms/add-cms-element-via-admin-sdk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
nav:
title: Add CMS element via AdminExtensionSDK
title: Add CMS element via MeteorAdminSDK
position: 30

---

# Add CMS Element via Admin Extension SDK
# Add CMS Element via Meteor Admin SDK

## Overview

This article will teach you how to create a new CMS element via the Admin Extension SDK. The plugin in this example will be named `SwagBasicAppCmsElementExample`, similar to the other guides.
This article will teach you how to create a new CMS element via the Meteor Admin SDK. The plugin in this example will be named `SwagBasicAppCmsElementExample`, similar to the other guides.

## Prerequisites

* Knowledge on the creation of [Plugins](/docs/guides/plugins/plugins/plugin-base-guide) or [Apps](/docs/guides/plugins/apps/app-base-guide)
* Knowledge on the [creation of custom admin components](/docs/guides/plugins/plugins/administration/add-custom-component#creating-a-custom-component)
* Understanding the [Admin Extension SDK](https://shopware.github.io/admin-extension-sdk/docs/guide/getting-started/installation)
* Understanding the [Meteor Admin SDK](https://shopware.github.io/meteor-admin-sdk/docs/guide/getting-started/installation)

::: info
This example uses TypeScript, which is recommended, but not required for developing Shopware.
Expand All @@ -24,7 +24,7 @@
## Creating your custom element

Similar to [Creating a new custom element via plugin](/docs/guides/plugins/plugins/content/cms/add-cms-element#creating-your-custom-element), this article describes creating a new custom element via app.
Creating a new element requires Admin Extension SDK.
Creating a new element requires Meteor Admin SDK.

Consider the same scenario to allow a shop manager configure a link to display the Dailymotion video. That is exactly what you are going to build.

Expand Down Expand Up @@ -53,7 +53,7 @@

```js
import 'regenerator-runtime/runtime';
import { location } from '@shopware-ag/admin-extension-sdk';
import { location } from '@shopware-ag/meteor-admin-sdk';

// Only execute extensionSDK commands when
// it is inside a iFrame (only needed for plugins)
Expand Down Expand Up @@ -90,7 +90,7 @@

```js
import Vue from 'vue';
import { location } from '@shopware-ag/admin-extension-sdk';
import { location } from '@shopware-ag/meteor-admin-sdk';

// watch for height changes
location.startAutoResizer();
Expand Down Expand Up @@ -125,7 +125,7 @@

Really straightforward, isn't it? As you probably know from Vue.js's Options API, you just need to load, register and use the Vue.js component to make them work.

What's especially interesting here is the use of the `location` object. This is a main concept of the Admin Extension SDK, where Shopware provides dedicated `locationIds` to offer you places to inject your templates into. For further information on that, it is recommend to have a look at the documentation of the [Admin Extension SDK](https://shopware.github.io/admin-extension-sdk/docs/guide/concepts/locations) to learn more about its concepts.
What's especially interesting here is the use of the `location` object. This is a main concept of the Meteor Admin SDK, where Shopware provides dedicated `locationIds` to offer you places to inject your templates into. For further information on that, it is recommend to have a look at the documentation of the [Meteor Admin SDK](https://shopware.github.io/meteor-admin-sdk/docs/guide/concepts/locations) to learn more about its concepts.

Check failure on line 128 in guides/plugins/plugins/content/cms/add-cms-element-via-admin-sdk.md

View workflow job for this annotation

GitHub Actions / Runner 

[LanguageTool] reported by reviewdog 🐶
Consider using either the past participle “recommended” or the present participle “recommending” here. (BEEN_PART_AGREEMENT[9])
Suggestions: `recommended`, `recommending`
URL: https://languagetool.org/insights/post/verb-tenses/ 
Rule: https://community.languagetool.org/rule/show/BEEN_PART_AGREEMENT?lang=en-US&subId=9
Category: GRAMMAR

Raw Output:
guides/plugins/plugins/content/cms/add-cms-element-via-admin-sdk.md:128:200: Consider using either the past participle “recommended” or the present participle “recommending” here. (BEEN_PART_AGREEMENT[9])
 Suggestions: `recommended`, `recommending`
 URL: https://languagetool.org/insights/post/verb-tenses/ 
 Rule: https://community.languagetool.org/rule/show/BEEN_PART_AGREEMENT?lang=en-US&subId=9
 Category: GRAMMAR

Check failure on line 128 in guides/plugins/plugins/content/cms/add-cms-element-via-admin-sdk.md

View workflow job for this annotation

GitHub Actions / Runner 

[LanguageTool] reported by reviewdog 🐶
In American English, “take a look” is more commonly used. (HAVE_A_LOOK[5])
Suggestions: `take a look`
Rule: https://community.languagetool.org/rule/show/HAVE_A_LOOK?lang=en-US&subId=5
Category: BRITISH_ENGLISH

Raw Output:
guides/plugins/plugins/content/cms/add-cms-element-via-admin-sdk.md:128:213: In American English, “take a look” is more commonly used. (HAVE_A_LOOK[5])
 Suggestions: `take a look`
 Rule: https://community.languagetool.org/rule/show/HAVE_A_LOOK?lang=en-US&subId=5
 Category: BRITISH_ENGLISH

In your case, we will get your own **auto-generated** `locationIds`, depending on the name of your CMS element and suffixes, such as `-element`, `-config`, and `-preview`.

Expand All @@ -136,7 +136,7 @@
For this topic we head to `mainCommands.ts`, since the registration of CMS elements is something to be done in a global scope.

```js
import { cms } from '@shopware-ag/admin-extension-sdk';
import { cms } from '@shopware-ag/meteor-admin-sdk';

const CMS_ELEMENT_NAME = 'swag-dailymotion';
const CONSTANTS = {
Expand All @@ -158,7 +158,7 @@
export default CONSTANTS;
```

At first, you import the Admin Extension SDK's cms object, used for `cms.registerCmsElement` to register a new element.
At first, you import the Meteor Admin SDK's cms object, used for `cms.registerCmsElement` to register a new element.

That is all about what is required to register your CMS element. As a best practice, it is recommended to create a **constant** for the CMS element name and the publishing key. This makes it easier to maintain and keep track of changes. The publishing key can be predefined since the name must be a combination of CMS element name and the `__config-element` suffix as shown above.

Expand All @@ -183,7 +183,7 @@

```js
import Vue from 'vue'
import { data } from "@shopware-ag/admin-extension-sdk";
import { data } from "@shopware-ag/meteor-admin-sdk";
import CONSTANTS from "../../base/mainCommands";

export default Vue.extend({
Expand Down Expand Up @@ -233,9 +233,9 @@

This file is the config component used to define every type of configuration for the CMS element. Most of the code will be common for experienced Shopware 6 developers, so here are some important highlights:

* Import `data` from the Admin Extension SDK, which is required for data handling between this app and Shopware
* Import `data` from the Meteor Admin SDK, which is required for data handling between this app and Shopware
* The `element` variable contains the typical CMS element object and is also used to manage the element configuration you want to edit
* The `publishingKey` is used to tell the Admin Extension SDK in Shopware what piece of information you want to fetch. In this case, you need the `element` data
* The `publishingKey` is used to tell the Meteor Admin SDK in Shopware what piece of information you want to fetch. In this case, you need the `element` data

So, now you need a simple input field to get a `dailyUrl` for the Dailymotion video to be displayed. For that, first fetch the element via `data.get()` as seen in `createdComponent` and then link it to the computed property `dailyUrl` with getters and setters to mutate it. Using `data.update({ id, data })` you provide the publishing key `id` as a target and `data` for the data you want to save in Shopware.

Expand All @@ -249,7 +249,7 @@

```js
import Vue from 'vue'
import { data } from "@shopware-ag/admin-extension-sdk";
import { data } from "@shopware-ag/meteor-admin-sdk";
import CONSTANTS from "../../base/mainCommands";

export default Vue.extend({
Expand Down
2 changes: 1 addition & 1 deletion resources/guidelines/documentation-guidelines/01-general.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ It is important to consider the background of the potential audience reading you
* [Developer docs](https://developer.shopware.com/docs/)
* [API Reference Guide](https://shopware.stoplight.io/)
* [PWA](https://shopware-pwa-docs.vuestorefront.io/)
* [Admin Extension SDK](https://shopware.github.io/admin-extension-sdk/)
* [Meteor Admin SDK](https://shopware.github.io/meteor-admin-sdk/)
* [Meteor icon kit](https://shopware.github.io/meteor-icon-kit/)
* [Frontend docs](https://frontends.shopware.com/)
* [Component library](https://component-library.shopware.com/)
Expand Down
2 changes: 1 addition & 1 deletion resources/references/adr/2021-12-07-admin-extension-api-standards.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ sw.ui.componentSection('sw-manufacturer-card-custom-fields__before').add({
#### Vue Devtools Plugin for finding the PositionIDs
It is impossible to create a list of all potential position IDs. And they would be hard to manage. To solve this problem we are writing a custom plugin for the Vue Devtools. This plugin will be available for Vue Devtools 6+. It makes identifying the position IDs very easy.

Just open the plugin in the Devtools (It is available directly when you open the Administration). Then you can see all positions at the current administration view which are available for extending. If you click at one position ID you get more information about it. Like the property in the Admin-Extension-SDK so that you directly know what functionality this position has.
Just open the plugin in the Devtools (It is available directly when you open the Administration). Then you can see all positions at the current administration view which are available for extending. If you click at one position ID you get more information about it. Like the property in the Meteor-Admin-SDK so that you directly know what functionality this position has.

In summary: the Devtool plugin provides a visual way to see which parts can be extended and what are the positionIDs for the extension position.

Expand Down
2 changes: 1 addition & 1 deletion ...ces/references/adr/2022-03-15-extract-data-handling-classes-to-extension-sdk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ You can find the original version [here](https://github.com/shopware/shopware/bl
:::

## Context
* The package `@shopware-ag/admin-extension-sdk` will be referred to as sdk
* The package `@shopware-ag/meteor-admin-sdk` will be referred to as sdk
* The ts/js implementation of the Administration is referred to as administration

Previously the administration held the implementation of the classes `Entity`, `EntityCollection` and `Criteria`.
Expand Down
6 changes: 5 additions & 1 deletion resources/references/adr/2022-06-27-providing-the-admin-extension-sdk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@
title: Providing the admin extension SDK
date: 2022-06-15
area: administration
tags: [admin-extension-sdk, vue]
tags: [admin-extension-sdk, meteor-admin-sdk, vue]
---

# Providing the admin extension SDK

::: warning
The Admin Extension SDK has been renamed to Meteor Admin SDK.
:::

::: info
This document represents an architecture decision record (ADR) and has been mirrored from the ADR section in our Shopware 6 repository.
You can find the original version [here](https://github.com/shopware/shopware/blob/trunk/adr/2022-06-27-providing-the-admin-extension-sdk.md)
Expand Down
Loading