# Web services

Connect to external webservices to show data from other sources, or even create, update and delete data. Use your app as a way to get your data updated by app users who are not in the office or share data with your app users where ever they are via the same interface.\
Authentication can be based on API key, bearer token or basic auth.

You first setup a New web service collection which is used by the List, One, Create, Update and Delete webservices which belong to this Web service Collection.  Enter the Authentication method an connection parameters once and use it for all of the underlying webcalls.&#x20;

Define the separate web services you need and add blocks in your app to show the information in your app.

## **Create new collection**

1. Choose Web services in the left side navigation of your app
2. Click **+ New Collection** to add your first webservice
3. Enter the Resource URL , that's the base url which is used by the List, One, Create, Update and Delete webservices which belong to this Web service Collection

<figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F9JGjF9GP05b5Pjf1xyF8%2Fimage.png?alt=media&#x26;token=052af821-750f-48d5-bb5c-e2eb3ffd3747" alt=""><figcaption></figcaption></figure>

## Setup your web service

After defining the Web service collection, you can start configuring the web service

1. Select for example the **List** web service
2. Add specific parameters if needed
3. Click the **Setup now**<br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FTqFcBkN28IYVLUHLt10I%2Fimage.png?alt=media&#x26;token=1085914c-db25-453d-9ef3-74e3e38e3d69" alt=""><figcaption></figcaption></figure>

   4\. The Tab **Fields** will be opened and if you have setup everything correctly, the fields within the web service will be shown

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FnrGGcmF6NeEHfoottPWS%2Fimage.png?alt=media&#x26;token=fbbd0cbc-5696-449f-aa5c-596396073b60" alt=""><figcaption></figcaption></figure>

   5\. If you don't need all of the information within the app, you can **deselect** those fields by unchecking the checkbox and **Save** your changes.

## Show web service data in your app

After you have connected your web service to your app, you can add blocks to your app to make the data visible

1. Open the **Content** tab of your app
2. Click the red **+ block** button
3. Select the **Advanced tab**
4. Select the **List** to show a list of items in a screen. The detail page will be added automatically\ <img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F1FVPSJJqDRLudnU8fH8p%2Fimage.png?alt=media&#x26;token=3e6aa7d3-0111-41ec-8a60-2b539f8c4c27" alt="" data-size="original">
5. Click **Add this block**&#x20;
6. Select the right data source, in this case the List  web service\ <img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FOA872QLX6G4s89bKgcC0%2Fimage.png?alt=media&#x26;token=f4af1878-3af7-4623-a423-0b10a48c16c2" alt="" data-size="original">
7. In your app a green List block will be added with a detail page below it.&#x20;
8. On the List block you can Enable or disable information to show in the list using the switches. \ <img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FBjuyJc8TIiTksNldHZXk%2Fimage.png?alt=media&#x26;token=5bd916ce-3dc8-419d-8809-a3c93f68fe76" alt="" data-size="original">
9. For advanced editing, select the **Elements** tab in the left top corner. [This article](https://docs.appmachine.com/style-your-screens/elements) explains to you how to use the element editor to fine tune the design .\ <img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FLEniaXImfwvNsKUpa569%2Fimage.png?alt=media&#x26;token=e21fa80b-7cd5-4c80-8a75-c845bf6b399d" alt="" data-size="original">
10. You can finetune the Detail page in the same way.
