Adding Hybrid Web Screens to Mobile Apps

1. Open the “Screens” section on the left side of the “UI Design” module.
2. Click on the “+” icon next to “WEB SCREENS”.
3. Select “New Screen”. Then give a name and click on the “CREATE” button.
   

     4. In the “Web Screen” screen that opens, you can now use the “GaugeChart” element from the “Elements” panel on the left side while in the “UI Design” module.

5. Drag and drop the “GaugeChart” element to “Web Screens”.
   
   
6. Go to the main page of your application and drag and drop a “Button” element from the “Elements” panel on the left side. Then give the button a name like “Navigate to New Screen”.
   
   
7. Add “Onclick>Navigation>Navigate” action to the Navigate to New Screen button from the “+ADD ACTION” drop-down menu in the “Properties” panel on the right side.

8. Add the web screen you created from the “To Screen” field as the target screen. (For example; KuikaWebScreen)

9. You can preview your application by clicking the “RUN” button in the upper right corner.

10. When you view the main screen, click on the button named “navigate to new screen”.
    

      11. After clicking the button, you can switch to the new screen and view the “GaugeChart” element.

Not: In the web and mobile application development process, you can access our content Learn the differences between web and mobile applications to learn the differences in elements and actions depending on the project type.