EDIT: I answered my own question. I don't know how to mark this as resolved, since SO doesn't allow me to vote my own answer right now. Thanks everyone.
I am trying to create a confirmation box (asking to remove a layout) in which the user has to press confirm or cancel - confirm means 'yes, remove the layout and close the confirmation box', cancel means 'just close the box'.
The confirmation box opens when a user presses RemoveButton - this means that RemoveButton doesn't do the job of "removing" until confirm is pressed. Clicking the RemoveButton should make the dialog to show up.
The problem is the my dialog is not showing up. I ran Chrome dev tool and made sure that setShowRemoveLayoutDialog(true) is working, but removeLayoutDialog is not opening. Even when I set a dev tool breakpoint on public removeLayout(layoutName: string), the dev tool could never reach it.
Can anyone tell me what I am doing wrong?
(We don't have to talk about CSS here since it is already built by my other teammates)
(I cannot do .confirm(confirm message) because it will trigger a no-alert error for lint. So I have to insert it into template and make a div or element for that).
Thank you!
This is my Vue/html template:
<RemoveButton #press="setShowRemoveLayoutDialog(true)">
<removeLayoutDialog v-if="showRemoveLayoutDialog"
:layout-name="props.node.name"
#confirm="removeLayout"
#cancel="setShowRemoveLayoutDialog(false)"/>
</RemoveButton>
This is my <script>:
#Component({
removeLayoutDialog,
...
})
export default class ThisClass {
...
public showRemoveLayoutDialog = false;
public removeLayout(layoutName: string) {
this.doRemoveLayout(layoutName);
this.showRemoveLayoutDialog = false;
}
public setShowRemoveLayoutDialog(isShown: boolean) {
this.showRemoveLayoutDialog = isShown;
}
}
I realized that having the dialog inside the button was the problem.
Instead of having <button ... <dialog></dialog> </button>, having <button><dialog> solved the problem.
Related
I'm utilizing <v-dialog> component to display a form for my web app. I want to implement an unsaved changes dialog to popup when the user aborts their changes without saving and either close/keep the dialog open depending on a button press. Unfortunately, I'm having a bunch of trouble figuring out exactly how to prevent the default closing actions done by the framework.
So from what I can tell, you can close a dialog 3 different ways:
Setting the v-model property to false.
Clicking outside of the v-dialog modal unless the persistent prop is set to true.
Pressing the escape key.
Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to true.
Approach #1:
My first approach was to only allow the user to exit the dialog if they hit a cancel button on the form. I quickly hit a snag when I tried to disable the use of the escape button.
Here's what I have tried so far: In my App.vue mounted function:
mounted () {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
console.log('The escape key was pressed.')
e.preventDefault()
e.returnValue = false
e.stopImmediatePropagation()
}
})
}
This should work. The log message is displayed in the console, but the dialog still closes after the escape key is pressed. I know I should be using key codes here, but this is for readabilities sake. I've also tried keyup and keypress with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.
Approach #2:
After I failed miserably trying to disable the escape key, I had to try something different. I tried adding this code inside the watch function to try and keep the dialog open if they cancelled:
dialog (val) {
if (val) {
console.log('Dialog is true')
} else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
console.log('User Wants to Keep Dialog Open')
this.dialog = true
} else {
console.log('Dialog is False')
this.close()
}
}
When I try and close the dialog, the confirm message pops up, and I hit the cancel button. Then, for some reason, the confirm dialog opens again. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:
User Wants to Keep Dialog Open
Dialog is true
User Wants to Keep Dialog Open
Dialog is true
I understand why the dialog watch method is being called again, what I don't understand is why the confirm dialog is showing again. That code should never be executing after cancelling the confirm message the first time. The log message shows that there's no way that code should be executing again. Something must be happening behind the scenes that I don't realize.
Anyone have experience with preventing the v-dialog component from closing? Or any help with my two approaches? Thanks in advance.
It's a property on the dialog:
<v-dialog persistent
That will force them to keep it open unless you call the closure programatically by toggling the model.
I'm building a website using Wix.com and I'm trying to add a feature with code. I want a button to appear only when I hover over a document on the page. So far the button appears the way I want, but when I try to click on it, it keeps flickering so it's hard for me to click it.
I'm pretty new to this so I just tried basic debugging But still I don't know why this is happening. Also, I couldn't find much help from Wix forum
here are the code and a screenshot from the site (code examples is the button)
let rollLeft = {
"duration": 200,
"direction": "left"
};
let rollRight = {
"duration": 200,
"direction": "right"
};
$w.onReady(function () {
//TODO: write your page related code here...
});
export function document15_mouseIn(event) {
//Add your code for this event here:
if(!$w('#button1').isVisible)
{
$w('#button1').show("roll", rollLeft);
}
}
export function document15_mouseOut(event) {
//Add your code for this event here:
if($w('#button1').isVisible)
{
$w('#button1').hide("roll", rollRight);
}
}
Without seeing it in action this is a bit of a guess, but it looks like when you move to the button, you leave the pdf, causing the button to hide.
I can think of at least two ways to get around this:
Add a delay to the effect options to give a user enough time to click the button before it starts to disappear.
Add a transparent box beneath the file icon and the button. Use that box to trigger the show and the hide on hover, instead of the file icon. That way the hide won't trigger when the user tries to click the button.
I developed a VSTO 4 add-in for Excel. It works perfect, however, I have a button placed in the custom tab of its Ribbon control that is initially disabled.
After clicked other ribbon button in my custom tab, I need to enable the initially disabled button.
I tried with:
btnCancelar.Visible = true;
In the Click event of a button, but button is not shown. The strange thing is that when debugging, it still does not appear, but if a MessageBox is shown, the button get visible at last.
I don't understand this behaviour. How can I enable or disable a ribbon button dynamically by code?
I'm not sure what your language is used in your project, but I guess you can tranform it to your own language used. I'll show the example here in C#:
First you need to implement a so called Callback function in the RibbonXML definition:
<button id="buttonSomething" label="Content" size="large" getVisible="EnableControl"/>
then the next step is to implement the Callback function:
public bool EnableControl(IRibbonControl control)
{
return true; // visible ... false = invisible
}
VSTO will trigger the getVisible Callback and depending on the return value enable or disable the visible state (don't forget to remove any Visible property from the RibbonXML, otherwise the Callback is not triggered)
In case of the Ribbon Designer you need to make sure your Click signature is correct, the easies way to do that is by double clicking the button on the ribbon designer. This will create the Click method for you, for instance:
I created a Ribbon with the Ribbon designer and added two buttons. Double clicked the first button to get an empty method like below, and added the code.
private void button1_Click(object sender, RibbonControlEventArgs e)
{
// Toggle button visibility and make sure the button is enabled
// Visible (obviously) makes it visible, while Enabled is grayed if
// false. You don't need this it is Enabled by default, so just for
// demo purposes
button2.Visible = !button2.Visible;
button2.Enabled = button2.Visible;
// Force Ribbon Invalidate ...
this.RibbonUI.Invalidate();
// Long running proces
}
This worked perfectly for me, so if it doesn't work for you please provide more details of your coding.
I have created a workaround to this.
It was simple. Just started the long running process in different thread. That way, cancel button is shown when it should and then hidden after the process ends.
I used this code to launch the process in the Ribbon.cs code:
btnCancelar.Visible = true;
Action action = () => {
Formatter.GenerateNewSheet(Formatter.TargetType.ImpresionEtiquetas, frm.CustomerID, workbook, btnCancelar);
};
System.Threading.Tasks.Task.Factory.StartNew(action);
And inside the process method I have this code:
public static bool GenerateNewSheet(TargetType type, string customerID, Excel.Workbook workbook, Microsoft.Office.Tools.Ribbon.RibbonButton btnCancelar)
{
try
{
_cancelled = false;
InfoLog.ClearLog();
switch (type)
{
case TargetType.ImpresionEtiquetas:
return GenerateTagPrinting(customerID, workbook);
}
return false;
}
finally
{
btnCancelar.Visible = false;
}
}
The interesting thing here I have discovered is that Excel is thread safe, so it was not necessary to add a synchronization mechanism neither when adding rows in the new sheet nor when setting Visible property to false again.
Regards
Jaime
When i open an opportunity form and from there i have opened an opportunity product, but when i comes back to project and click on save and close it returns back me to opportunity product page (which i have opened last) instead of opportunity list page.
So, i have make custom function on save and close button and write code as following :
function SaveAndClose()
{
Xrm.Page.data.entity.save("saveandclose")
}
but issue remain same.
Please anyonve can you help me out on this?
I have fixed issue by following code:
function SaveAndClose()
{
Xrm.Page.data.entity.save();
if (parent.opener != undefined)
{
window.parent.close();
}
else
Xrm.Page.ui.close();
}
Hope this help !!!!
I am having real confusion with some flash banners I'm creating and making the button into a clickable object which opens a web page.
I have been using this code for a while below, which works...
on(release){
getURL("http://www.the-dude.co.uk", "_blank");
}
And I placed this code on actual button within the actions panel
However I have been told the code above is very old and that I should use action script like below...
buttonInstance.onRelease = function() {
getURL("http://www.the-dude.co.uk", "_blank");
}
So I've tried to get this method below to work but nothing happens when I click the button, and I get one error, this...
So in a nutshell I cannot get this newer code to work! Ahh
Can anyone please help me understand where I am going wrong?
I have tried placing the new code in the Scene 1 of my actions. No worky..
And I've also tried placing the code below, actually on my button within the actions panel...
this.onRelease = function() {
getURL("http://www.the-dude.co.uk", "_blank");
}
Still not working.
My scene settings are alway this...
Any help would be great thanks.
You need to place the code below on the same timeline as the instance of the button (as you tried). And the instancename of the button must be "buttonInstance".
You can set the instance name in the properties panel when the button is selected.
buttonInstance.onRelease = function() {
getURL("http://www.the-dude.co.uk", "_blank");
}