i am using the following office js fabric component. it seems to be working but i want to add options dynamically instead of design time. i am not able to do that. any code snippet will be helpful.
https://developer.microsoft.com/en-us/fabric-js/components/dropdown/dropdown
I have tried and successfully able to add options to basic html select control but this one appears to be not working.
I first add the options to the select control with jQuery, and then init the component like the documentation says.
$("#platformId").append('<option value="3">Option 3</option>');
Related
All,
I need some help making keepAlive in VueJS3 composition api work.
I have a page to configure profiles ( business feature ) where I have some tabs created dynamicly based on user selection from a drop down.
Here is my profile model :
So Each tab is an entry to the realm attribute array.
The VTAB component I am using is from vuero library : https://vuero.cssninja.io/
That I am using this way :
While making modifications, the user should be able to switch tabs without losing the modification he made while switching tabs.
From official documentation, keepalive is the directive to be used for such use case. Unfortunatly I am not able to make it work. I lose all the modifications when I switch the tab.
Do you have any suggestions, to make this work .
Thanks A lot.
It seems to be a limitation from vuero component.
I went with a cutsom solution. By listening on the onBeforeUnmont
I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.
The basic example of snackbar for Material Design Components for Web doesn't work. It produces the error:
```
TypeError: snackbar.show is not a function
```
I have tried using jQuery to make sure the DOM loaded properly. I have tried changing back and forth the javascript initialisation methods, but none seems to work.
You can find the code here: https://jsbin.com/mejefeq/edit?html,console,output
I have read the docs over and overs again, but none of it mentioned anything about this. Since this MDC for Web is not at all popular, I have nowhere left to go for help.
Yeah that was a breaking change in the 0.43.0 update. The new way of showing the snackbar is by using
snackbar.open();
This however will just open the snackbar. If you want to change the text in the snackbar you can use:
snackbar.labelText = 'Your new text';
So together you can use them:
snackbar.labelText = 'Your new text';
snackbar.open();
You can check out more of the documentation here, with the current javascript properties and events here
I am new to aurelia. This sample code under the html tab works fine in JSbin:
http://jsbin.com/yiqodilaho/edit?html,js,output
But generates an error in seeCode.run (the online editor that we are developing)
https://seecode.run/#-KAbCyh8F6SpHiTVpOfq .I found that its not working as iframe has set of restrictions and so doesnt allow scripts, API's or form submissions. So, I have used "Sandbox" attribute . sandbox="allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts" and it working fine. Now, we have migrated the front end of the project to Aurelia and same problem has occured again. This time adding sandbox attribute couldnt make any difference. Can Somehow help me with this issue..? Does Sanbox attribute work in Aurelia?
Are you asking if aurelia's binding system supports <iframe sandbox.bind="tokens">? It does not support this. HTMLIFrameElement.sandbox is a DOMSettableTokenList which needs to be assigned like this: f.sandbox.value = '...' and aurelia is assigning it like this f.sandbox = '...'.
https://gist.run/?id=7dca16fd08dff85cf71f2fef1c439baf
You should be able to use it like this still: <iframe sandbox="allow-pointer-lock" ...
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement
https://msdn.microsoft.com/en-us/library/hh771918(v=vs.85).aspx
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.