Hello,
can you say is it possible to add loader (some spinner) to choices field?
Thanks,
Anton
Hello,
can you say is it possible to add loader (some spinner) to choices field?
Thanks,
Anton
Hello Anton,
The Lazy Loading option basically allows you to load large data by chunks. Also, data is requested when a property is initialized. Normally, this happens when a user activates the corresponding property grid category. If the Lazy Loading option doesn't work for you for some reason, you can send a fetch request within the choices
function and load data. A sample code is available within the choices property description.
However, I'm afraid that a Form Library doesn't have an option to display a spinner within the Dropdown editor. If you wish to necessarily display a loading indicator, you may wish to implement a custom property grid editor on top of a standard Dropdown. For more information on how to implement custom questions and use them as property grid editors, refer to our documentation.
Please let me know if you have any further questions.
Hello Jane,
Of course I use cache) But we have a lot of api requests. And for example a lot of our scenarios look like that:
Two custom dropdowns in the properties section located one after another.
Choices for the first dropdown this is the result from api request (can contain 1000 choices).
Choices for the second dropdown this is other request to the api and it depends what user selected in the first dropdown. So we have 1000 different result with choices. And we have a lot of such fields. it's not possible to cache it when the application was loaded. It's a big count of data. So we need some loader for the property field. Can you suggest how to do it?
Thanks,
Anton
Hi Anton,
Thank you for the clarification. From what I gather, it may take some time to load choices within a drop-down list. When choices are being loaded, users see an empty popup. However, you would rather display a loading indicator when the choices are being loaded. I'll discuss a possible option with our developers.
Please stay tuned.
Anton,
I additionally discussed this task with our developers. If you want to display a loading indicator while drop-down items are being loaded, we may suggest that you apply custom CSS and replace the Loading… message with a loading indicator.
C#/* You can add your custom css here.*/
.spg-dropdown_select-wrapper .sv-list__empty-text {
display: none;
}
.spg-dropdown_select-wrapper .sv-list__empty-container {
position: relative;
height: 96px;
}
.spg-dropdown_select-wrapper .sv-list__empty-container::after {
content: " ";
display: block;
position: absolute;
width: 64px;
height: 64px;
top: calc(50% - 32px);
left: calc(50% - 32px);
background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_885_24957)'%3E%3Cpath opacity='0.1' d='M24 40C15.18 40 8 32.82 8 24C8 15.18 15.18 8 24 8C32.82 8 40 15.18 40 24C40 32.82 32.82 40 24 40ZM24 12C17.38 12 12 17.38 12 24C12 30.62 17.38 36 24 36C30.62 36 36 30.62 36 24C36 17.38 30.62 12 24 12Z' fill='black' fill-opacity='0.91'/%3E%3Cpath d='M10 26C8.9 26 8 25.1 8 24C8 15.18 15.18 8 24 8C25.1 8 26 8.9 26 10C26 11.1 25.1 12 24 12C17.38 12 12 17.38 12 24C12 25.1 11.1 26 10 26Z' fill='%2319B394'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_885_24957'%3E%3Crect width='32' height='32' fill='white' transform='translate(8 8)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 64px 64px;
animation-name: rotationAnimation;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 1s;
}
@keyframes rotationAnimation {
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
}
A loading indicator will appear within a popup while items are being loaded.
When the items are loaded, the loading indicator will disappear.
If you require a more advanced UI such as displaying a loading indicator within the Dropdown's input box, please consider creating a custom component which would handle this task.
Let me know if you have any further questions.
Thanks
Hello Anton,
Please let me know more about a usage scenario. Do you wish to inform users that the Load Option Map choices are being loaded? Have you tried our Lazy Loading option? It is possible to enable Lazy Loading for a custom property. An example is available here.
I look forward to your reply.
Hello Jane,
As I understand Lazy loading is not fit. I need to send request when control was added to survey. Not when user clicks on field.
I need behavior like this.
SurveyCore.Serializer.addProperty("itemvalue", { name: "test", type: "dropdown", displayName: "Test field", isSerializable: true, showMode: "form", isDynamicChoices: true, choices: (obj: any, choicesCallback: any) => { if (!choicesCallback) return; //show loader in the test field //send request and get result .then((data) => { // process data // hide loader }) }, });
Thanks,
Anton