# Compose a POST request using web component

**URL:** <https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897>\
**Category:** Questions about Thunkable X\
**Created:** [August 23, 2018, 5:45pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897 "2018-08-23T17:45:10Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![tonyz80](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tonyz80/32/67985_2.png) [@tonyz80](https://community.thunkable.com/u/tonyz80)\
**Post date:** [August 23, 2018, 5:45pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/1 "2018-08-23T17:45:10Z")

</div>

Hello, can anyone help me with composing a POST request using X Thunkable (not Classic Android) Web API component?

- I want to send 3 data values (name, email, idea) to a GoogleSheet

It would be of help also if it is done via the Google Apps Script, that one can create from within the GoogleSheet. Most of my attempts have failed, and all I get is Undefined.

A complete sample aia would be great.

thanks

---

<div class="post-metadata">

**Author:** ![cttricks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cttricks/32/93678_2.png) [@cttricks](https://community.thunkable.com/u/cttricks)\
**Post date:** [August 25, 2018, 3:08pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/2 "2018-08-25T15:08:54Z")

</div>

It’s very Simple !!  
Create a Custom Html form for this and Upload the required details ( name , email and idea ) through it to the Spreadsheet.

Do you want the AIA or blocks Screen shorts for this ??

---

<div class="post-metadata">

**Author:** ![Alan](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@Alan](https://community.thunkable.com/u/Alan)\
**Post date:** [October 31, 2018, 8:45pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/3 "2018-10-31T20:45:53Z")

</div>

Yes Please!

---

<div class="post-metadata">

**Author:** ![tonyz80](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tonyz80/32/67985_2.png) [@tonyz80](https://community.thunkable.com/u/tonyz80)\
**Post date:** [November 1, 2018, 4:31am UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/4 "2018-11-01T04:31:39Z")

</div>

yes, that would be great if you can provide the blocks screen shots.  
Much appreciated in advance.  
thanks

---

<div class="post-metadata">

**Author:** ![Nenye](https://avatars.discourse-cdn.com/v4/letter/n/6a8cbe/32.png) [@Nenye](https://community.thunkable.com/u/Nenye)\
**Post date:** [March 26, 2019, 5:10pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/5 "2019-03-26T17:10:47Z")

</div>

Please can you share a sample project for this. it would be greatly appreciated

---

<div class="post-metadata">

**Author:** ![cttricks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cttricks/32/93678_2.png) [@cttricks](https://community.thunkable.com/u/cttricks)\
**Post date:** [March 26, 2019, 6:14pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/6 "2019-03-26T18:14:07Z")

</div>

Hi @Nenye

> [@Nenye](#):
>
> Please can you share a sample project for this.

Of what ? If you are talking about **to send 3 data values (name, email, id) to a GoogleSheet** in thunkable x then here i have a solution for you !!

* * *

**First you have to create a google app script Url !!**  
Here is how you can create one. . .

[http://community.thunkable.com/t/send-upload-data-to-google-sheets-using-script/68466?u=cttricks](http://community.thunkable.com/t/send-upload-data-to-google-sheets-using-script/68466)

Note that the Step 3 for thunkable x is going to be different !! So after creating your script url you have to follow these steps ;

* * *

**Step 3 : Blocks Section**  
Here we don’t have a web component in thunkable X so we are using Web Viewer to post/ send data.  
Make sure in the properties section of the web viewer component !! Visibility is set to False.

**Design Part ||**

 ![Screenshot%20(217)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/d/fd467c56b1cd2b7da61e3aeffcb43057bedd5b7d.png)

**Blocks Part ||**

 ![Screenshot%20(216)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/8/08c655bbed8024769e463bcab692d555fd0f1225.png)

* * *

🔗 **[Get Demo AIA](https://x.thunkable.com/copy/e5887a47b45fcde13acf6ae9060353d2)**

// Ct tricks

---

<div class="post-metadata">

**Author:** ![cttricks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cttricks/32/93678_2.png) [@cttricks](https://community.thunkable.com/u/cttricks)\
**Post date:** [March 26, 2019, 6:30pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/7 "2019-03-26T18:30:35Z")

</div>

If you have any query !! feel free to ask 😀

**Also Read this post**

> [@Email OTP Verification | Using App Script URL](http://community.thunkable.com/t/email-otp-verification-using-app-script-url/73435):
>
> Hello Everyone !! Today i have created an alternative way to verify the users via their email id. This method is not only for the Thunkable X you can also use this in Thunkable Classic too smiley So I have just created a Google app script, which allows you to send the email directly from your app to the users email [provided by the user] Here is a sample video_camera video to show you How the app & Script works. link [Click Here](https://youtu.be/MOgpaeD3gMc) to watch !! [[EOV]](https://youtu.be/MOgpaeD3gMc)[poll](https://community.thunkable.com/t/email-otp-verification-using-app-script-url/73435/1) //Ct tricks

---

<div class="post-metadata">

**Author:** ![Nenye](https://avatars.discourse-cdn.com/v4/letter/n/6a8cbe/32.png) [@Nenye](https://community.thunkable.com/u/Nenye)\
**Post date:** [March 26, 2019, 6:34pm UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/8 "2019-03-26T18:34:22Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![nicolas.adonesq79z](https://avatars.discourse-cdn.com/v4/letter/n/22d042/32.png) [@nicolas.adonesq79z](https://community.thunkable.com/u/nicolas.adonesq79z)\
**Post date:** [March 17, 2020, 2:34am UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/9 "2020-03-17T02:34:54Z")

</div>

hi my friend, can you help me whit this? [Help with POST and PHP](http://community.thunkable.com/t/help-with-post-and-php/518771)

thanks a lot

---

<div class="post-metadata">

**Author:** ![sleon003x2rq](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sleon003x2rq](https://community.thunkable.com/u/sleon003x2rq)\
**Post date:** [April 26, 2020, 5:10am UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/10 "2020-04-26T05:10:15Z")

</div>

how would one deal with basic HTTPS Authentication? don’t think i’ve seen this yet in the forums  
[wiki/Basic\_access\_Auth](https://en.wikipedia.org/wiki/Basic_access_authentication)

the provided sample is code is:

curl [https://api.site.com/store](https://api.site.com/store)   
-u usrkey:   
-d “description=brown-fox”

am trying [https://usrkey:pass@api.site.com/](https://usrkey:pass@api.site.com/)  
but the response is “missing authentication” status code 401. is there another way to pass the credentials?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [April 26, 2020, 7:36am UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/11 "2020-04-26T07:36:15Z")

</div>

this looks better  
{  
“url”: “[https://api.site.com/store](https://api.site.com/store)”,  
“raw\_url”: “[https://api.site.com/store](https://api.site.com/store)”,  
“method”: “get”,  
“auth”: {  
“user”: “usrkey”,  
“password”: “pse”  
}  
}

you could try to put “auth”: {  
“user”: “usrkey”,  
“password”: “pse”  
}  
into the body of your api get/post

does the api provide documentation?

---

<div class="post-metadata">

**Author:** ![sleon003x2rq](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sleon003x2rq](https://community.thunkable.com/u/sleon003x2rq)\
**Post date:** [April 27, 2020, 6:06am UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/12 "2020-04-27T06:06:13Z")

</div>

How to pass Auth HTTP POST Request

@jared you gave me an idea

so i did some tests in 3 different apis i found online and this is what worked for me (my blocks should be self explanatory).

 ![auth](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/d/9d281d26f41177b8c1d5b771dc24db8241d7aad4.png)

Notes:  
don’t mind the naming conventions I was prototyping and too lazy to keep changing names.  
Authorization for most apis i came accross was always Basic and you will need to convert your user:passwd to base64 encoding. some apis use apikey:(password is blank) refer to api docs  
example lets say your your username:admin and password:passowrd1. go to a base64 encoder enter admin:password1 of and encode it. so for this case the block Authorization would look as such  
Authorization “Basic YWRtaW46cGFzc3dvcmQx”

sources:  
[HTTP Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages)  
[base64encoder](https://www.base64encode.org)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:31am UTC](https://community.thunkable.com/t/compose-a-post-request-using-web-component/42897/15 "2024-11-08T11:31:47Z")

</div>


