# Zoezi Addon Lets create an addon for [Zoezi](https://www.zoezi.se/) Flex! API Documentation: [Link](https://developer.zoezi.se/apidoc) If you want to follow this guice but you do not yet have a developer account with Zoezi, please send an email to `developer@zoezi.se` and they will help you get started! *** ## Frontend Code You should create a new component by pressing `Ny Komponent`, select `Vue 2` then you should copy paste the following code to the HTML, Javascript and CSS tabs. Then press save. ### HTML ```html

Resources list

Selected resource

{{selected}}

``` ### JS ```js export default { zoezi: { icon: 'mdi-account' }, props: { // Props that are defined like this // are editable in the homepage editor. resourceCount: { title: 'Display count', type: Number, default: 5 } }, data() { return { resources: [], selected: null, renameValue: "" } }, methods: { getResources() { // /api// window.$zoeziapi.get("/api/df080855b38974a5/resources").then((res) => { this.resources = res.slice(0, this.resourceCount); }) }, selectResource(resource) { this.selected = resource; }, renameSelectedResource() { // Create object that fits the ResourceChangeData as specified here: // https://developer.zoezi.se/apidoc/index.html#POST/resource/change___ResourceChangeData // Since we only want to change the name, we want to input all // required fields from the list including the lastname field // which we want to change. (lastname is the displayname of resources) const resourceChangeData = { id: this.selected.id, // [Required Integer] ID of the resource. lastname: this.renameValue, // [Required String] Our input field. resourceType: this.selected.resourceType, // [Required String] Since we dont want to change this we just use the value it currently has. sites: this.selected.sites // [Required Integer] We do not want to change this so we use the value it currently has here too. } // /api// window.$zoeziapi.post("/api/df080855b38974a5/resource", { ...resourceChangeData }).then(() => { location.reload() }); } }, mounted() { // Load resources when the component is mounted (Standard Vue2 Options API syntax.) this.getResources(); } } ``` ### CSS ```css .card { border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; background-color: white; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25); backdrop-filter: blur(15px); padding: 1rem; margin: 0.5rem; display: flex; min-width: fit-content; justify-content: space-between; align-items: center; } .button { background: linear-gradient(45deg, rgb(255, 220, 0), rgb(255, 50, 0)); width: fit-content; height: fit-content; padding: 0.5rem; padding-left: 1.5rem; padding-right: 1.5rem; color: white; border-radius: 20px; font-size: 1.5rem; } .button:hover { background: rgb(255, 150, 0); } .input { background: white; width: fit-content; height: fit-content; padding: 0.5rem; padding-left: 1.5rem; padding-right: 1.5rem; margin-right: 1rem; border-radius: 20px; font-size: 1.5rem; border: thin solid black; } ``` ## Backend Functions The frontend code utilizes two API calls that reference the current addon. These are the `GET /resources` and `POST /resource` endpoints. Define the functions to run when you call these API calls in the `Funktioner` tab. Press `Ny Funktion` then give it a good name like `Get Resources`, select `Python 3.12`, then pick `Mall fÃ¶r API` then press `Spara`. Copy the code for the `GET` request below, then repeat the same for the `POST` request. ### Get Resources (GET /get//resources) ```python import zoezi import json def main(data, context): zoezi.init(data['apikey'], data['hostname']) resources = zoezi.get("/api/resource/get") # For other usecases, to get a single resource with specific id: # resources = zoezi.get("/api/resource/get", {"id": 8}) # Full list of parameters (and returntype) here: # https://developer.zoezi.se/apidoc/index.html#GET/resource/get return resources ``` ### Post Resource (POST /api//resource) ```python import zoezi import json def main(data, context): zoezi.init(data['apikey'], data['hostname']) resource = data['params'].get('resource') if not resource: raise Exception('Missing parameter: resource') res = zoezi.post('/api/resource/change', json=resource) return json.dumps({'result': res}) ``` ## Defining API Endpoints You are almost done! The only thing left is to define the API endpoints that are going to call our newly made functions. 1. Go to the `API:er` tab 2. Press `Nytt API` 3. Give the API endpoint a meaningful name. 4. Select the path, for example `/resources` for the `GET` API and `/resource` for the `POST` API. 5. Assign the HTTP method to run, `GET` for the `GET /resources` API and `POST` for the `POST /resource` API. 6. Assign the function to run, here you will see the functions you defined before. 7. Give it a good description that will show up in the API documentation. 8. The `GET` request does not require any parameters. So you can press `Spara` to finish setting it up. 9. For the `POST` request we need to add a parameter, click `Ny Parameter`, name it `resource`, provide a good description, select `Obligatorisk` to force the user to send it for the API to respond with a result. Then select `Typ` as `JSON` and press `Spara` to finish setting it up. 10. Finally press `Spara` to finish setting it up. ## Using the Addon You have now successfully set up an API endpoint and a component for the frontend, you can now add it to your Zoezi Flex website! 1. Log in to your staffpage, going to addon.zoezi.se/staff 2. Go go to the `Tillvalsbutik` in the left hand menu. 3. Search for your addon and select it. 4. Press `LÃ¤gg till` 5. Navigate to the root of the homepage at addon.zoezi.se/ 6. Press the cogwheel at the bottom left corner. 7. Add a new row, add the component you just made to the page. 8. You should now see the component render to the page and it should let you change the name of one of the resources after you select it! ## Conclusion Congratulations! You now have a zoezi addon! For this addon to show up for everyone using the zoezi system send it for review in your developer portal. After the zoezi team has had a look at it it will be made available for everyone to use! Thanks for reading!

Resources list

{{resource.lastname}}

Selected resource

Stories, Tech & Ideas

How to create a Zoezi Flex addon component!

Welcome to my new blog!