ENDOC-502 Update the MFE config tutorial #520

nshaw · 2022-05-31T20:09:27Z

No description provided.

nshaw · 2022-06-02T17:31:28Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

+```
+
+9. Set the **`Custom UI`** so it accepts the "name" config parameter. 
+```javascript


this is freemarker not javascript

We can use ftl here like the react.md

nshaw · 2022-06-02T17:31:44Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

+
+9. Set the **`Custom UI`** so it accepts the "name" config parameter. 
+```javascript
+{


Remove the start and end brackets, not needed in freemarker.

nshaw · 2022-06-02T17:31:44Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

+
+9. Set the **`Custom UI`** so it accepts the "name" config parameter. 
+```javascript
+{


Remove the start and end brackets, not needed in freemarker.

nshaw

Looks good, can't approve since it was my PR.

nshaw · 2022-06-02T17:31:28Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

+```
+
+9. Set the **`Custom UI`** so it accepts the "name" config parameter. 
+```javascript


this is freemarker not javascript

i think this was applied in the latest commit ??

jyunmitch · 2022-06-07T13:25:40Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

@@ -1,24 +1,24 @@

 # Add a Configuration Screen in App Builder

-Entando widgets can be customized through an App Builder configuration screen that is itself a micro frontend.
+Entando widgets can be customized through an App Builder configuration screen that is itself a micro frontend. This tutorial splits the process into 3 steps:


'steps' >>Maybe change to stage or phase since there are multiple steps in each of them. Also change in headers below?

tried "phases" and "successive stages" and considered bullets or letters instead of a numbered list, but then decided "steps" was the clearest way to describe performing a sequence of actions.

jyunmitch · 2022-06-07T13:37:27Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

-the React root component (*App*).
+1. Replace the contents of `src/WidgetElement.js` with the following to add attribute handling to the custom element and re-render the app when an attribute changes. 
+
+> Note: This enables the `name` attribute of the custom element to be passed as a property to the React root component (`App`).


does this note need to be in a note. It would work smoothly with the paragraph above.

i can see it either way. i think it also works as an aside, which allows the instruction to be more pointed.

jyunmitch · 2022-06-07T13:44:03Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

@@ -81,26 +82,32 @@ export default WidgetElement;
    export default App;
 ```

-3. For test purposes, edit `public/index.html` and set a value for the *name* attribute of the
-custom element.
+3. For test purposes, replace the contents of `public/index.html` with the following. This  allows you to set a value for the `name` attribute of the custom element.


This allows you to set a value for the name attribute of the custom element. >> how about highlighting that it can be set and reset at any time or set in the config screen in app builder, to forewarn

this is hardcoded. at this point in the tutorial the user cannot change it in the config screen. this step is to confirm changing the visible text via the contents of this file

jyunmitch · 2022-06-07T13:48:12Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

-## Create a config MFE
-Next create a new MFE for managing the configuration option. These steps are very similar to the [previous tutorial](./react.md). 
+6. Load the updated `my-widget` files into Entando as was done for the [previous tutorial](./react.md#upload-the-react-files)
+


drop the comment about done for the previous tutorial. It's not necessary and it confused me more than helped.

jyunmitch · 2022-06-07T13:50:28Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

-Next create a new MFE for managing the configuration option. These steps are very similar to the [previous tutorial](./react.md). 
+6. Load the updated `my-widget` files into Entando as was done for the [previous tutorial](./react.md#upload-the-react-files)
+
+> Note: If you followed the previous tutorial, only `js/main.GENERATED-ID.js` needs to be added or updated.


similar comment about this note, I was confused completely by what previous tutorial because I had done the React tutorial ages ago, or the reader may have a different widget. I thought maybe it was talking about the previous step/section. I think calling the React Tutorial 'previous' is very confusing.

the link should clear that up. "the tutorial to create a React MFE" is a mouthful.

changed "previous" to "React MFE"

jyunmitch · 2022-06-07T13:52:32Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

+
+> Note: If you followed the previous tutorial, only `js/main.GENERATED-ID.js` needs to be added or updated.
+## Step 2: Create a config MFE
+Next, create a new MFE for managing the configuration option. These steps are very similar to the [previous tutorial](./react.md). 


These steps are very similar to the previous tutorial. >> is this necessary, it wasn't helpful because I wasn't about to go look at that one anyway to see if it was similar.

many people would. also, this tutorial is a natural extension / builds off of that tutorial

jyunmitch · 2022-06-07T13:59:35Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

@@ -223,14 +230,16 @@ npm run build
 - `my-widget-config/static/css`
 - `my-widget-config/static/js`

-6. Upload the css and js files from the corresponding directories under 'my-widget-config/build/static'. The generated id in each file name (e.g. '073c9b0a') may be different after each build. There may also be LICENSE.txt or .map files but they are not necessary for this tutorial.
+6. Upload the css and js files from the corresponding directories under `my-widget-config/build/static`


there are 2 step '6's

jyunmitch · 2022-06-07T14:00:37Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

@@ -223,14 +230,16 @@ npm run build
 - `my-widget-config/static/css`


indent 3 spaces so these bullets can be indented, for smoother look. Same for the steps below

jyunmitch · 2022-06-07T14:05:36Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md


-11. Fill out the "name" field and click `Save`. You can update the widget configuration at any point by clicking `Settings` from the widget actions in the Page Designer.
+9. Fill out the "name" field and click `Save`


This step is too vague. I thought the config page was a preview and did not realize this is where you enter the name. Maybe I am the only stupid one but the note below really would have helped here. I don't think it takes away from the short step to include the note here.

jyunmitch · 2022-06-07T14:09:00Z

vuepress/docs/v7.0/tutorials/create/mfe/widget-configuration.md

-11. Fill out the "name" field and click `Save`. You can update the widget configuration at any point by clicking `Settings` from the widget actions in the Page Designer.
+9. Fill out the "name" field and click `Save`
+
+> Note: You can update the widget configuration at any point by clicking `Settings` from the widget actions in the Page Designer.


I don't think this should be in a note because it is REALLY important. I didn't pay attention to it because it was in a note. If this note had been in the previous step, it would have given a clarity about where to update the name.

ENDOC-502 Update the MFE config tutorial

8cfab86

nshaw requested review from jyunmitch and Lyd1aCla1r3 May 31, 2022 20:09

ENDOC-502 Apply MFE config feedback

5acac18

nshaw commented Jun 2, 2022

View reviewed changes

Lydia Pedersen added 2 commits June 3, 2022 08:49

ENDOC-502-mfe-config Edits

d311887

ENDOC-502-mfe-config Last fixes

8d860aa

nshaw commented Jun 3, 2022

View reviewed changes

jyunmitch reviewed Jun 7, 2022

View reviewed changes

Lydia Pedersen added 3 commits June 7, 2022 10:11

ENDOC-502-mfe-config Apply feedback and to Next

8572494

ENDOC-502-mfe-config Fix links update Next files

b3def98

ENDOC-502-mfe-config Fix dead link

812d2e5

jyunmitch approved these changes Jun 14, 2022

View reviewed changes

Merge branch 'main' into ENDOC-502-mfe-config

1b48182

nshaw merged commit cd50bf9 into main Jun 22, 2022

nshaw deleted the ENDOC-502-mfe-config branch June 22, 2022 20:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ENDOC-502 Update the MFE config tutorial #520

ENDOC-502 Update the MFE config tutorial #520

nshaw commented May 31, 2022

nshaw Jun 2, 2022

nshaw Jun 2, 2022

nshaw Jun 2, 2022

nshaw Jun 2, 2022

nshaw Jun 2, 2022

nshaw left a comment

nshaw Jun 2, 2022

Lyd1aCla1r3 Jun 3, 2022

jyunmitch Jun 7, 2022

Lyd1aCla1r3 Jun 7, 2022

jyunmitch Jun 7, 2022

Lyd1aCla1r3 Jun 7, 2022

jyunmitch Jun 7, 2022

Lyd1aCla1r3 Jun 7, 2022

jyunmitch Jun 7, 2022

jyunmitch Jun 7, 2022

Lyd1aCla1r3 Jun 7, 2022

Lyd1aCla1r3 Jun 7, 2022

jyunmitch Jun 7, 2022

Lyd1aCla1r3 Jun 7, 2022

jyunmitch Jun 7, 2022

jyunmitch Jun 7, 2022

jyunmitch Jun 7, 2022

jyunmitch Jun 7, 2022

		@@ -223,14 +230,16 @@ npm run build
		- `my-widget-config/static/css`


		11. Fill out the "name" field and click `Save`. You can update the widget configuration at any point by clicking `Settings` from the widget actions in the Page Designer.
		9. Fill out the "name" field and click `Save`

ENDOC-502 Update the MFE config tutorial #520

ENDOC-502 Update the MFE config tutorial #520

Conversation

nshaw commented May 31, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nshaw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment