Preloading (load before attach) pages and CheckBox styling

Question

Going to ask two questions at once if I may:

1. How can I preload a page before it's attached? For example, having page 1 as homepage, and another page 2, each of them with their own Datasource. How can I make it so all the Datasources / widgets are loaded on page 2, without actually going into it? (I want to do this because some pages are not commonly used on my app, but when you go to them for the first time you get an awkward wait to load the Datasources).

2. About styling with CSS a checkbox. App Maker hands us the 'Slider' CheckboxStyle. How can I style the slider inside that checkbox? I tried looking at various CSS reference and couldn't change slider color from blue to white when it's corresponding data is true.

Answer 1

To answer your first question, you may preload a page datasource by using the app startup script. Basically the loader needs to be paused, then the datasources loaded and finally resume the loader. To achieve that, in your app go to Settings -> App Settings -> App startup script, and add the following:

loader.suspendLoad();
app.datasources.MYDATASOURCEONE.load();
app.datasources.MYDATASOURCETWO.load(function(){
    loader.resumeLoad();
});

To answer your second question, you may want to use the following CSS or something similar to achieve what you need:

/* Changes the slider color when the value is false*/
.customCheckbox>input:not(checked){
  background-color: red; //apply color here
}

/* Changes the slider color when the value is true */
.customCheckbox>input:checked{
  background-color: blue
}

/* Changes the slider round button color when the value is false */
.customCheckbox>label:after{
  background-color: orange;
}

/* Changes the slider round button color when the value is true */
.customCheckbox>input:checked+label:after{
  background-color: green;
}

Then all you have to do is apply the customCheckbox style to the widget list of styles in the Property Editor.

References:
- https://developers.google.com/appmaker/settings#app_start
- https://developers.google.com/appmaker/ui/styles#extra_styles_with_the_styles_property