I have encountered a situation where I need to display a Dropdown and want the options to dynamically fetch from an API and load on clicking the caret (maybe show a loader by the time the API response comes through). The experience I am looking for is something in the following lines -
Loading (fetching options from API)
Display options after successful response
The documentation didn't give any API surface through which this can be possible.
Is it possible to achieve this with the current APIs that are in place for this control component?
Good point to start is to use BasePicker Component from Pickers.
import { BasePicker } from 'office-ui-fabric-react/lib/Pickers'
Inside BasePicker you have a methods which you can use to make a "lazy" behavior. For example, when you click on component then make a call to API and populate items list.
What is inside BasePicker take a look here or from official documentation.
Codepen example
Related
I would like to create a form and add a dropdown list widget that will pull its choices from an API. I don't see any setting for that where would I call the API? what I was able to find is from 2014 so I think its outdated.
https://www.progress.com/blogs/sitefinity-custom-form-widget-with-dependent-dropdowns
It's cake... just use a regular input, then on the page use a Javascript widget and wire it up into a dropdown.
https://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource
Use whatever JS component you want
Just a note though, give your input a cssclass name that will let you easily find it with the javascript.
I have a post on this https://www.sitefinitysteve.com/blog/binding-sitefinity-form-field-to-remote-data
I have been creating application in React Native. The goal of the application is to have content that can be changed without updating the app. I understand that the two best solutions are either Firebase or some other API call at every application start to get new content. Now I would just like to know if there are any recommended way to style content beside my three current solutions:
Styling content with markdown and then parsing it in application
Styling content with html and then parsing it in application
Or having a standard content object so that all the content is packed the same way and then showing right text/media on correct place with correct style
I am open to any other styling solutions for content and would like to know what is the best way. I also already have a server responding to API call that returns new content, the biggest problem is styling.
Inside my app, I'm using the WKWebView to display a website. My goal is, when user is pressing a button on this website, I want to stop an action linked to this event and replace it with my own, natively made (custom action outside the WKWebView). I've been trying to search for any solution to fetch mentioned event but unsuccessful. What more came to my mind, if there is a way to fetch a JavaScript in WKWebView, I have a possibility to add some JS script code to this site (not to delete the action I want to block). Thank you for any help.
First, do you have a permission to mess with this web site's behaviour? I assume you do, otherwise it is likely illegal.
Second, try using Safari Web Inspector with a device/simulator, and use the DOM tree and console tools to find out what is the HTML/javascript that is involved with this action on this site.
If you can't find what happens in HTML/JS yourself, feel free to post a new separate question on SO with your target URL, some HTML/JS code, and which link/action you want to replace. Tag the question with "javascript" and ask if it is possible to write some javascript to replace that particular action to some custom JS code.
Usually there are 2 types of actions: either it is something that provokes AJAX calls to a server API triggered by an event handler, or it is a plain HTML link that results in a web navigation. For both cases it is possible to write a JS script that overrides the action.
Finally, use WKUserScript to inject javascript into the page, and override the action. Use window.webkit.messageHandlers to send an event from your custom action to the app side. Use WKScriptMessageHandler to process the event in the Objective-C or Swift code.
See an example here: http://nshipster.com/wkwebkit/
in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page.
I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click.
For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid.
So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely.
The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.
I am looking at suggestions on implementing this requirement.
If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.
Currently I don't have anything so anypointers are appreciated.
Assuming AJAX is being used
I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.
I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:
function showLoadingScreen(enabled){
return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
showLoadingScreen(true);
}).ajaxStop(function(){
showLoadingScreen(false);
});
Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.
I want to invoke a procedure in one page and use it in another page, and the response is only used by the next page, so I think JsonStore is not suit for that. Should I define a global var?
Is there any code sample to do such things? Thanks for your help.
I presume by pages you mean different HTML files. If so, that is not recommended, Worklight is intended for single page applications. There are no code samples that show how to do that.
I would recommended having a single HTML page and using something like jQuery.load to inject new HTML / DOM elements. By dynamically injecting new HTML your single/main HTML file shouldn't be too big and you can destroy (i.e. remove from memory / the DOM) unused DOM elements. Searching on Google for page fragments and html templates could help you find examples. The idea is that you don't lose the JavaScript context.
Maybe you can get away with doing a new init to re-initialize JSONStore (it won't delete any the data, just give you access) on every new HTML page and use get to get access to the JSONStore collections to perform operations such as find.