OpenUI5 control instance viewer.
UI5Query is to controls what jQuery is to the DOM.
Useful for getting references to OpenUI5 controls during console debugging.
Play with UI5Query: https://jonbri.github.io/ui5query
While developing OpenUI5 applications, I often followed this pattern while debugging in the browser:
- inspect the dom, approximating where I think the dom root of a control is
- after not getting close enough, dig around in the "Elements" tab for the desired dom ref
- copy/paste the element's id to the console
- get a jQuery selector to the ref by wrapping with:
- finally, get the control reference with:
After doing this many times I decided to streamline the process with a small tool, hence UI5Query.
A similar tool is the "UI5 Inspector" Chrome plugin.
node_modules/ui5query/dist/ui5query.min.js. The nature of this tool (on-the-fly debugging) means that it's often most convenient to simply copy-paste the distribution directly into the console. You can also integrate via NPM.
ui5Query (or it's alias
ui$) function is the main API function, similar to
$. Either a string or a regular expression can be passed in which will match against control id's and type names. The return object can be used to construct pipelines of functionality and access the search matches.
// show controls with 'button' in their id;// a more complicated searchvar oButton = 0;// searches will populate the "target" variables;ui$target // first button matchui$target1 // second button match, etc// all control instances// string together a bunch of commands -> a "pipeline";
toArray-> return an array of Control instances
popup-> show an identifying label above the match
highlight-> alter the matches styles to make it more visible
standout-> combination of pipeline functions
config(object) is used to configure UI5Query.
standoutDelay(default: 3000) -> search highlighting time in ms
labelStyle-> css object for search labels
controlStyle-> css object control highlighting
Custom pipeline API functions can be defined. A pipeline name and two functions are needed...one function to perform an action upon a match dom ref, and one function to undo the action. Each function is called once per query match. The second function will be called a short time after the first (
The two functions,
fnLastPass are invoked with the same context for state sharing. This shared context is pre-populated with:
idMatch-> control id matches from search query
controlNameMatch-> control type name matches from search query
npm installnpm test # run test suite (qunit, phantomjs)npm run lint # eslintnpm run serve #npm run package # generates ui5query.min.js