feature: add an example app for Board column extension #114
Conversation
There was a problem hiding this comment.
Hey @ShayElkana – great, but I have a lot of feedback... I'll split it into blockers for release, and things to think about when building sample apps in general.
blockers for release
- Readme has many errors/small things that need to be updated
- Need to fix CSS bug
- Don't show both detach and attach buttons, only the relevant one
- Bump package version in package.json
craftsmanship issues
A sample app should show a full working app, to teach concepts and give sample code that they can reuse in their own app.
This is a working app, but it doesn't really teach any practical concepts. It's more like boilerplate code, rather than a sample app.
To take it to the next level, think about what features you want to focus on, and how you can use the app to show the right way to implement them. For example:
- Integration with webhooks
- Update column values via API
To be fair, these issues also exist in our other quickstarts...
But we should decide if this sample is practical enough to add value and release, or if we should wait and improve it...
@gregra81 FYI – also relevant for any other sample apps that the team is planning to build or already building...
| @@ -0,0 +1,43 @@ | |||
| ## Overview | |||
| This is the "Quickstart React for Board column extension" example. | |||
| <br>It can be used as a board view or dashboard widget, connected to a board and render data from the board using settings. | |||
There was a problem hiding this comment.
Edit this line – not correct
| 1. Open monday.com, login to your account and go to a "Developers" section. | ||
| 2. Create a new "QuickStart Board column extension View Example App" | ||
| 3. Open "OAuth & Permissions" section and add "boards:read" scope | ||
| 4. Open "Features" section and create a new "Boards View" feature |
There was a problem hiding this comment.
| 4. Open "Features" section and create a new "Boards View" feature | |
| 4. Open "Features" section and create a new "Board column extension" feature |
|
|
||
| Find the provided URL in your terminal. This is your local URL: http://localhost:8302, if you like to get a public can use the Apps CLI by running the following command `mapps tunnel:create -p 8302` and then you are expected to get a public url for example: https://abcd12345.apps-tunnel.monday.com | ||
|
|
||
| ## Configure Monday App |
There was a problem hiding this comment.
This section is missing info and some incorrect. Had the following questions when I was following along:
- what column type does this example run on?
- What scopes does it need?
| "scripts": { | ||
| "start": "npm run stop && concurrently \"npm run server\" \"npm run expose\"", | ||
| "build": "react-scripts build", | ||
| "expose": "mapps tunnel:create -p 802", |
There was a problem hiding this comment.
| "expose": "mapps tunnel:create -p 802", | |
| "expose": "mapps tunnel:create -p 8302", |
| ] | ||
| }, | ||
| "devDependencies": { | ||
| "@mondaycom/apps-cli": "^2.0.0", |
There was a problem hiding this comment.
| "@mondaycom/apps-cli": "^2.0.0", | |
| "@mondaycom/apps-cli": "^4.0.0", |
| 8. Enjoy the Quickstart View Example app! | ||
|
|
||
| ## Release your app | ||
| 1. Run script |
| 4. Open "Features" section and create a new "Boards View" feature | ||
| 5. Open "View setup" tab and fulfill in "Custom URL" field your monday tunnel public URL, which you got previously (example: https://abcd12345.apps-tunnel.monday.com) | ||
| 6. Click "Boards" button and choose one of the boards with some data in it. | ||
| 7. Click "Preview button" |
There was a problem hiding this comment.
remove - column extension doesn't have a preview
| <div className="App"> | ||
| <textarea value={context}/> | ||
| <button onClick={async () => { | ||
| await monday.execute('attachExtensionsToColumn'); |
There was a problem hiding this comment.
Instead of showing both buttons, I suggest having 1 button that shows attach/detach based on the current state of the app.
| @@ -0,0 +1,18 @@ | |||
| body { | |||
There was a problem hiding this comment.
CSS bug - first characters of context is cut off
No description provided.