Creating Design Elements with code in App Lab

CS Principles Coding and Debugging Help
1

Is there a way to create design elements in app lab using code?

For instance, a student wants the user of their app to be able to add new elements to the screen. The student cannot create these elements in design mode ahead of time and show/hide them because they don’t know how many the user will create, so they need to be made dynamically.

I know you can do this in web lab, since you are directly interacting with the HTML and you can target the HTML elements in your JavaScript file. However our class does not learn HTML or CSS so this solution would not help my students. I don’t see a way to do something like document.createElement() and element.appendChild() in app lab.

The other alternative is they could draw on the canvas, but that will not be the same as having the design elements added with the correct property values, though this seems like the best work around.

The answer might just be that app lab cannot do this. But at least that would save me time of trying to figure out myself. I see in the “advanced section” they have a setStyle() option to add CSS styling, but do not see an HTML element creation tool in app lab.

Thanks!

2

Yes you can create elements using code. However, there arte some limitations to using coded elements.

Types of elements:
textLabel, button, image, etc

Example => App Lab - Code.org

1 Like
3

This example shows what looks like a login app using datasets, it does not show creating textLabels, buttons, or image elements on the screen with code. Maybe you linked the wrong example?

4

Here is an example that creates buttons with code. Line 427 is where the buttons are created.

1 Like
5

This is what I was looking for. I did not see these functions in code.org in the UI Controls section previously. Thank you!