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.

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

How to easily update component authoring behaviour? #125

Open
wildone opened this issue Jan 29, 2023 · 9 comments
Open

How to easily update component authoring behaviour? #125

wildone opened this issue Jan 29, 2023 · 9 comments
Labels
enhancement New feature or request

Comments

@wildone
Copy link

wildone commented Jan 29, 2023

Is your feature request related to a problem? Please describe.
Some components need to have new buttons added to the edit toolbar and have ability to refresh page or component when interacting within edit ui.

image

Need to be able to add new items specifying icon, text and URL to open.

How to do this easily?

Describe the solution you'd like
Would be great to specify this at component level in a dedicated file same as dialog config component/edit/content.json. Similar functionality exist in AEM eg cq:listeners and cq:actionConfigs. You can see possible dialog configs here https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/components-basics.html?lang=en#cq-actionconfigs-classic-ui-only

Implementing these will allow more separation of concern so that we don't have to override everything.

Describe alternatives you've considered
Overriding existing JS but its source but that is yuck and just going to be messy long term.

@wildone wildone added the enhancement New feature or request label Jan 29, 2023
@wildone wildone changed the title How to easily add new edit buttons to components? How to easily update component authoring behaviour? Jan 29, 2023
@paweljozwicki
Copy link
Member

We are working on the documentation related to extending the page editor. It should be ready in a few days.

@wildone
Copy link
Author

wildone commented Feb 3, 2023

@paweljozwicki will you cover how to extend Dialog fields as well? I am trying to add isDisabled to Text and other form components.

@wildone
Copy link
Author

wildone commented Feb 4, 2023

@paweljozwicki I am trying to add a simple Link component to dialog, but it does not seem to work.

I have created Link.js:

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i  ) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { Link as Button } from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/button.js";
import React from "/apps/websight-atlaskit-esm/web-resources/react.js";
export default class Link extends React.Component {
  render() {
    // eslint-disable-next-line react/jsx-props-no-spreading
    return /*#__PURE__*/React.createElement(Button, _extends({
      autocomplete: "off"
    }, this.props));
  }

}

and link.json.html

{
    "type": "/apps/typerefinery/components/dialog/link/Link.js",
    "props": {
        "name": "${properties.name}",
        "label": "${properties.label}",
        "description": "${properties.description}",
        "removeIfEmpty": "${properties.removeIfEmpty || false}",
        "appearance": "${properties.appearance || 'link'}",
        <sly data-sly-test="${properties.disblaed}">"isDisabled": ${properties.disabled || false},</sly>
        <sly data-sly-test="${properties.spacing}">"spacing": ${properties.spacing || ''},</sly>
        <sly data-sly-test="${properties.href}">"href": ${properties.href || ''},</sly>
        <sly data-sly-test="${properties.target}">"target": ${properties.target || ''},</sly>
        <sly data-sly-test="${properties.type}">"type": ${properties.type || ''},</sly>
        "defaultValue": ""
    }
}

and then added it to my dialog

      "editflow2": {
        "sling:resourceType": "typerefinery/components/dialog/link",
        "name": "flowapi_editurll",
        "label": "Edit"
      }

@wildone
Copy link
Author

wildone commented Feb 4, 2023

@paweljozwicki I am trying to add a simple Link component to dialog, but it does not seem to work.

....

Anyways I've figured out how to do this :D

image

@wildone
Copy link
Author

wildone commented Feb 4, 2023

@paweljozwicki Have you overwritten window.open in React? I am trying to do window.open with target "_blank" and it opens in same tab 😢

@paweljozwicki
Copy link
Member

paweljozwicki commented Feb 6, 2023

We didn't overwrite window.open.
On what browser do you have a problem?
For verifying an issue I added a button to our assetreference field with

        this.openLink = () => {
            const { value } = this.props;
            window.open(value, '_blank');
        }; 

and it works fine on Chrome (Version 109.0.5414.119), Firefox (Version 109.0.1), and Safari (Version 15.6.1)

@wildone
Copy link
Author

wildone commented Feb 7, 2023

We didn't overwrite window.open. On what browser do you have a problem? For verifying an issue I added a button to our assetreference field with

        this.openLink = () => {
            const { value } = this.props;
            window.open(value, '_blank');
        }; 

and it works fine on Chrome (Version 109.0.5414.119), Firefox (Version 109.0.1), and Safari (Version 15.6.1)

I was on brave. I've changed the button to appearance=link and it work fine. :D

image

@wildone
Copy link
Author

wildone commented Feb 7, 2023

@paweljozwicki I am still keen to see how to add a button to the edit controls of a component. :D

@paweljozwicki
Copy link
Member

We remember that, but still working on documentation. If it's urgent then you can use a WebAction (here is an example) but we would like to introduce new solution and not sure if WebActions will be supported in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants