Thunkable #4 - Introduction to advanced features | Webview Explanation

Hello friends, welcome to the another tutorial of programming infinity. This is the fourth part of the thunkable tutorial. This tutorial is the beginning of advanced features in thunkable. There are many advanced features like webview, notifications, firebase, maps and so on in thunkable. This tutorial is about the webview. So, let's start with the webview..

WEBVIEW

The webview is an useful element in android for showing webpages in app, despite of opening the browser. which will provide you a control over every actions like browsing history, bookmarks, autofill data etc. which is not possible with the browser. i.e. webview is a combination of web browser + view which makes webview, in which web browser loads the pages and view shows it to the user and interacts with user. There are total of 10 options which you can customize in the webview in the designer section and 10+ options in the blocks section. Now, let's know about all these in details.

Designer:-

• Follow links - If checked, webview will detect and open the links, which will open in new tab or in the same tab  and save it in history for navigation.
• Height - Sets the height of the webview. There are 3 options available as Automatic, Fill parent and a text box for entering custom width in pixels and percent.
• Width - Sets the width of the webview. This has also 3 options same as in height.
• Home URL - It is the url which will load first time, when the app opens.
• Ignore SSL Errors - If checked will ignore the SSL Errors in the webview. SSL Errors is a error which occured while loading a secured https websites. This options igonore this type of error and load the pages otherwise prevents the page from loading.
• Use External Browser - If checked, will show a dialog to the user of all the available web browsers in the phone and open the respective link in the web browser.
• Uses Location - If checked will enable location for webpages in webview. So that webpages will get the current location of the user with GPS or Network.
• Visible - If checked, the webview is visible, otherwise invisible.
• Zoom Display - If checked will enable zoom in android webview, otherwise not.

Blocks:-

• call(Webview).Can Go Back - Finds if the webview has back history, so that webview can go back. Used with "if" statement.
• call(Webview).Can Go Forward - Finds if the webview has forward history, so that webview can go forward. Used with "if" statement.
• call(Webview).Clear Caches - Clears every cache of the webview i.e. all the stored data which will help pages to load faster by saving data when loading first time, and second time instead of using original data, loads from the cache. These data will automatically deleted after its expiry.
• call(Webview).Clear Locations - Clears every location permissions of the webview which is granted to the user, so that the webpage has to again ask permission for accessing location.
• call(Webview).Go Back - If webview has back browsing history, then loads the previous website from the current website.
• call(Webview).Go Forward - If webview has forward browsing history, then loads the forward website from current website.
• call(Webview).Go Home - Loads the home url specified in designer or blocks section.
• call(Webview).Go to URL url - Loads the specified url in webview, empty text is used for the url and joining it to this block as below image.

• Webview.Current Page Title - Gives the title of the current page as string. String is a array of characters. as "APPLE - new char[]{"A","P","P","L","E"};" where 'APPLE' is a string and rest are char array. i.e. string is a word or a combination of words.
• Webview.Current URL - Gives the URL of the page which is currently being viewed.
• Webview.Follow Links - Returns true when the follow links is enables either in designer or blocks section. Used with "if" statement.
• set(Webview).(Follow Links)to - sets whether to follow the links for navigation. 'true' or 'false' are used with this from logic in the blocks.
• Webview.Height - returns the height of the webview sets in the designer or blocks section.
• set(Webview).(Height) to - sets the height of the webview. Used with math empty block written "0" as below. 

• set(Webview).(Height Percent).to - Sets the height of the webview in percent. Used in the same way as of previous block.
• (Webview).Home URL - returns the home URL of the webview which is set using designer or blocks as a string. i.e. combination of characters.
• set(Webview).(Home URL).to - sets the home URL of the webview. used with empty text block as used in call(Webview).Go to URL url.
• Webview.Ignore SSL Errors - returns true when ignore SSL Errors  is checked in designer section or sets to true in blocks section, otherwise false. Used with "if" statement. 
• set(Webview).(Ignore SSL Errors).to - sets whether to ignore SSL errors in webview. Used with true or false of logic section.
• (Webview).Use External Browser - returns true when Use External browser is true either from the designer or blocks section. Used with "if" statement.
• set(Webview).(Use External Browser).to - sets whether the webview loads URL in external browser or in the same webview, takes true or false as a value from the logic section, true means the URL will open in external browser installed on the phone, and false means in the same webview.
• (Webview).Visible - returns true when the webview is visible on the screen or false when webview is invisible. Used with "if" statement.
• set(Webview).(Visible) to - sets the visibility of webview, takes true or false from the logic section, true means visible and false means invisible.
• (Webview).Width - returns the width of the webview sets in the designer or blocks section in integer  format. e.g. 100,10 etc.
• set(Webview).(Width).to - sets the width of the webview. Used in a way same as of  set(Webview).(Height) to.
• set(Webview).(Width Percent).to - sets the width percent of the webview. Used in a same way as of set(Webview).(Height Percent).to.
• (Webview).Zoom Display - returns true when zoom display is turn on, otherwise false. Used with "if" statement.
• (Webview) - returns the webview component.

Width + Height properties - 

1. Automatic - Automatically sets the width/height of the component to wrap all its content.
2. Fill parent - sets the width of the component to automatically fills the available space horizontally means width wise.
3. Custom width - sets the width of the component in percent or pixels provided in the text box.

Note - The properties section set in the blocks section will override the properties of designer section. e.g. If webview visibility is invisible in the designer section, whereas visible in blocks section, In runtime the webview will be visible to the user.