I am trying to develope a component for my company wich should have an integrated dialog. Creating the component was easy until i hit the point with the Dialog. I want to use the com.ibm.xsp.extlib.component.dialog.UIDialog for my component because it has some nice features wich i want to use so creating my own dialog with a ClientSideDojo is not an option.
Normaly when adding a component to another i use component.getChildren().add(MyNewComp),but when i try this Code:
public class myComponentWithADialog extends UIComponentBase implements FacesComponent {
//...other Code...
public void buildContents(FacesContext context, FacesComponentBuilder builder)
throws FacesException {
UIDialog dialog = new UIDialog();
TypedUtil.getChildren(container).add(dialog);
dialog.setStyleClass("dlgUserPref");
dialog.setTitle("titelxyz");
dialog.setId("TagDialog");
UIPanelEx panel = new UIPanelEx();
panel.setTagName("div");
panel.setStyle("border:2px solid red;");
panel.setStyleClass("lotusList lotusTags lotusRelatedTags");
dialog.getChildren().add(panel);
this.getChildren.add(dialog);
}
//....
}
My Panel does not display inside the dialog when calling XSP.openDialog('dialogClientId') in my browser the dialog is shown but empty.
I already tried several other methods like dialog.getPopupContent.getChildren().add() but then i get the error: javax.faces.component.UIPanel incompatible with com.ibm.xsp.extlib.component.dialog.UIDialog$PopupContent.
Also i tried to find a solution on google but i only found a entry at openNTF from someone with the same problem but also without any solution.
Note: I also tried to 'inject' some content to a standard <xe:dialog> and to a <px:panel> inside the <xe:dialog> via a button with SSJS like keithstric does in his blog. Code:
var dialog:com.ibm.xsp.extlib.component.dialog.UIDialog =
getComponent('extlibdialog');
if(dialog.getChildren().size() > 0) {
dialog.getChildren().clear();
}
var TextField:com.ibm.xsp.component.xp.XspOutputText = new com.ibm.xsp.component.xp.XspOutputText();
TextField.setTitle("test");
TextField.setId("testTextField");
TextField.setValue("<p>This is the new Content</p>");
dialog.getChildren().add(TextField);
This code works fine for a standard <xp:panel> outside a dialog but not on the dialog itself or a panel inside it.
The dialogue is not pre - rendered when the page is loaded, but when you actually call for it in XSP.openDialog(...)
So you need to get your code run in that event (mobile now, can't check if it is exposed).
Plan B: do use a Dojo dialogue that is backed by a rest control, so you can transport whatever data you need back and forth.
A word of caution: popup dialogs are a UI concept transplanted from desktop apps. They are alien to Web apps and mostly not working in mobile. Consider and Inline form instead (or a wizard)
Related
Previous question for context (the previous question was going nowhere, so I created this new one to start fresh): Unable to Create New MVC Widget in Kentico 12
I'm trying to create a widget called "Image with Summary". For now, I'm just trying to add a single property to it (a summary property that will have a rich text editor).
It isn't appearing as a widget option when I add a new widget to page builder:
From this, you can see that I have page builder configured properly (there is already a "Rich text" widget added), you can see that adding widgets is possible (the "Rich text" widget comes from a NuGet package that I installed called "Kentico.EMS12.MvcComponents.Widget.RichText"), and you can see that I only have two widgets available ("Form" and "Rich text"), neither of which are the widget I'm trying to add.
I need your help figuring out why my new widget is not appearing in this dialog.
Here is the Solution Explorer in Visual Studio showing all the files I've created for this new widget:
Here is what my properties class looks like:
// ImageWithSummaryProperties.cs
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
using Kentico.PageBuilder.Web.Mvc;
public class ImageWithSummaryProperties : IWidgetProperties
{
public string Summary { get; set; }
}
}
Here is what my view model looks like:
// ImageWithSummaryViewModel.cs
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
public class ImageWithSummaryViewModel
{
public string Summary { get; set; }
}
}
Here is what my controller looks like:
// ImageWithSummaryController.cs
using System.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;
using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary;
[assembly: RegisterWidget(
identifier: "Rhythm.ImageWithSummary",
controllerType: typeof(ImageWithSummaryController),
name: "Image with Summary",
Description = "An image with summary text.",
IconClass = "icon-l-img-3-cols-3")]
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
public class ImageWithSummaryController : WidgetController<ImageWithSummaryProperties>
{
public ActionResult Index()
{
var properties = GetProperties();
return PartialView("Widgets/_Rhythm.ImageWithSummary", new ImageWithSummaryViewModel()
{
Summary = properties.Summary
});
}
}
}
Here is what my view looks like:
#* _Rhythm.ImageWithSummary.cshtml *#
#using Kentico.PageBuilder.Web.Mvc
#using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
#using Kentico.Components.Web.Mvc.InlineEditors
#model ImageWithSummaryViewModel
#if (Context.Kentico().PageBuilder().EditMode)
{
Html.Kentico().RichTextEditor(nameof(ImageWithSummaryProperties.Summary), null);
}
else
{
<div class="fr-view">
#Html.Raw(Html.Kentico().ResolveRichText(Model.Summary))
</div>
}
I wouldn't focus too much on the view file, as I'm not even able to add the widget to the page builder, so the view has never even had a chance to be called.
Here's my home view file:
#* Views/Home/Index.cshtml *#
#using Kentico.PageBuilder.Web.Mvc
#using Kentico.Web.Mvc
<h1>Rhythm Agency</h1>
#Html.Kentico().EditableArea("main")
I'm really at a loss as to why this widget isn't appearing in the list of available widgets to add to the page section. Here's some extra context:
I'm on Kentico 12.0.77.
I've tried a widget without a controller and now one with a controller.
As you can see, I have the widget registration (as an assembly attribute) in the controller class file.
The frontend of the site renders the rich text widget just fine.
I didn't see any relevant issues in the error log.
I'm using the default section.
When I call EditableArea, you can see I do not place any restrictions on the widgets that can be used.
I'm using the free edition of Kentico. I doubt that's a factor, but mentioning it just in case (the "benefits of upgrading your license" link is currently a 404).
I don't see any errors in Chrome's console.
I've read various instructions for creating widgets like 10 times. No idea what I'm missing.
I'm using Chrome on Windows 10.
I was previously calling the widget "Image Summary Section", but I renamed it on the off chance "Section" was a reserved word.
EDIT:
Somebody is curious as to why this and the previous question are different, so this edit clarifies that. The previous question was about a widget I was attempting to implement using just a properties class. This newer question uses a different approach (namely, using a controller), which is an alternative way of implementing widgets in Kentico.
EDIT #2:
Somebody recommended I put the widget registration assembly attribute in the App_Start folder, which I did, but it didn't help:
So why this is failing to work is still a mystery.
For the controller and widget to be recognized you need to put your controller in the '/Controllers' folder. I have my widget controllers located in the '/Controllers/Widgets' folder.
I had issues which included not having added the suffix 'Controller' in the class name and issues with the widget controller not being in the '/Controllers' folder.
Also you aren't working in an seperate project? Because this would need you to use the following in the 'AssemblyInfo.cs'
using CMS;
[assembly: AssemblyDiscoverable]
And make sure you have enabled the page builder feature in your kentico project. For example:
protected void Application_Start()
{
...
// Gets the ApplicationBuilder instance
// Allows you to enable and configure Kentico MVC features
ApplicationBuilder builder = ApplicationBuilder.Current;
// Enables the preview feature
builder.UsePreview();
// Enables the page builder feature
builder.UsePageBuilder();
...
}
I have added a Global Button with the following code.
public override void Initialize()
{
if (!String.IsNullOrEmpty(Base.PrimaryView))
{
Type primaryViewItemType = Base.Views[Base.PrimaryView].Cache.GetItemType();
PXAction action = PXNamedAction.AddAction(Base, primaryViewItemType, "SubmitTicket", "Submit Ticket", TestClick);
}
}
public IEnumerable TestClick(PXAdapter adapter)
{
throw new PXException("Button clicked from graph" + Base.GetType().Name);
}
And it renders the button like this in each of the pages.
Now, I would like to display a popup panel, on button's click. I know I can create a popup panel on screen section. But, is there some way that I can have a general popup panel created in one place and can be displayed on each of the pages on the button's click?
Thank you.
As #HB_ACUMATICA mentioned there is no good easy way.
Providing another alternative to his post, you can create a graph and use it as a reusable popup by calling:
throw new PXPopupRedirectException(graph, string.Empty, true)
One thing I ran into was a sizing issue on the popup...
Changing the height/width when calling another graph as an in-page popup using PXPopupRedirectException
If you do copy and paste the PXSmartPanel you can create re-usable business logic by implementing the reusable business logic pattern found in this help as a starting point:
Reusing Business Logic
If I understand correctly you want to share the same PXSmartPanel control in different pages without having to copy/paste it in every screen.
In Acumatica Framework this is achieve by custom container controls like 'PXUploadDialog' which derives functionality from other controls like 'PXSmartPanel'. This is the control that is used when you attach files in all screen.
Unfortunately there seems to be no documentation on how to achieve this.
The closest I found is this SO question which is essentially unanswered:
Create custom User Control for Acumatica
Considering this, you may want to copy/paste the same smart panel in all screen.
To ease copying you can use the 'Edit ASPX' feature, make sure you backup the project before.
Edit ASPX to get to the code:
Copy paste your smart panel in the page and click 'GENERATE CUSTOMIZATION SCRIPT' to package the changes in the project:
We have a need to play a sound file on grid cell, for this we have used the below control <audio> similar to how the default Acumatica used in some of the screens for Barcode scanning, etc. We did the same, but when we register the script and control code is changing to <PXControl> and the methods for Play etc., are not not accessible. This is happening only when we try to insert this audio control inside a customization package. On the ASPX all the functionality works fine.
Before Generating Script in the package
<audio id="audiobeep" preload="auto" src="http://www.soundjay.com/button/beep-07.wav" style="visibility: hidden" />
After Generating Script in the package
<px:Control runat="server" ID="audiobeep" />
As “audio” tag is converting into “px: control” tag, it doesn’t support properties like as Preload, Src, Style.
Can you please guide us on this approach?
When using the Aspx Editor with the "Generate Customization Script" button, the only supported way to embed arbitrary HTML tags like <audio> is to use the PXLiteral control. Here's an example of how you would use the PXLiteral control if typing directly into the Aspx Editor:
<px:PXLiteral runat="server" Text="<h1>Test!</h1>" />
Once the script has been generated, it becomes possible to edit the properties of the control from the layout editor.
For this specific scenario, I would suggest a slightly different approach, involving only the use of JavaScript code connected to the PXDataSource control. The first step is creating a PXAction in your graph that will be invoked when you click on your button:
public PXAction<Customer> test;
[PXUIField(DisplayName = "Test", MapEnableRights = PXCacheRights.Update, MapViewRights = PXCacheRights.Select, Enabled = false)]
[PXButton(ImageKey = PX.Web.UI.Sprite.Main.Process)]
public virtual IEnumerable Test(PXAdapter adapter)
{
//TODO: Do something useful
return adapter.Get();
}
For simplicity, let's assume that you're ok having the button in the main screen toolbar - but you could also map it to a PXButton control somewhere on your page.
Then, using the layout editor, we're going to add a JavaScript control by dragging it to the form.
After the JavaScript control has been added, head over to the properties section and set the script. The script needs to be set as a single-line, but for readability here's a nicely formatted version of the script we're going to use:
function commandResult(ds, context)
{
if (context.command == 'Test') // Test is the name of the PXAction we created earlier
{
var audio = new Audio('../../Sounds/Ding.wav');
audio.play();
}
}
Note: The Ding.wav file is shipped with Acumatica, but you are free to use a sound from another URL, or ship one with your customization. If using an external URL, make sure to use the right protocol, HTTP/HTTPS.
The last step is hooking the data source to your JavaScript function. To do that, click on the DataSource section of the layout editor, open the Client Events group from the property editor, and set the CommandPerformed event to commandResult which is the name of the JavaScript function we created.
After publishing, you'll see the Test button in the toolbar of the form. If you click on it, you'll hear a nice ding!
The sound will be played unconditionally, no matter what happens in your PXAction delegate. If you wanted to play the sound under specific conditions only, one way to achieve that would be to read the content of a field on the screen that is set by your delegate, similar to what is done in the IN305000 page:
var description = px_alls["edDescriptionPnl"];
if (description != null && description.getValue() != null)
{
var audio = new Audio('../../Sounds/Ding.wav');
audio.play();
}
I'm using the BTProgressHUD Xamarin component in an app that is built using MvvmCross. I'm currently working on the iOS version of the app. My ViewModels make several web service calls and expose an 'IsBusy' property, which the associated views are binding to, in order to show or hide the progress spinner. This is pretty much the way things are set up in the N=34 MvvmCross sample (https://github.com/MvvmCross/NPlus1DaysOfMvvmCross/tree/master/N-34-Progress) as well.
The problem is that in some cases a ViewModel must automatically call a service as soon as it is created. I tried to make the call in the Start() function of the ViewModel, but I noticed that the BTProgressHUD spinner does not show up on top of the view. I suspect that the problem is that BTProgressHUD must be displayed only after a view has been made visible, and probably this is not the case when ViewModel.Start() runs.
Has anyone encountered this before? Is there a simple way to run code in the ViewModel after the view has been made visible?
Thanks.
Is there a simple way to run code in the ViewModel after the view has been made visible?
The N=42 video - http://slodge.blogspot.co.uk/2013/11/n42-is-my-viewmodel-visible-can-i-kill.html - introduces an IVisible interface that you can add to your ViewModel - it's your job to call this from your View - but this is easy to do on each platform. For example,, on iOS it is done using ViewDidAppear/ViewDidDisappear in https://github.com/MvvmCross/NPlus1DaysOfMvvmCross/blob/master/N-42-Lifecycles/Lifecycle.Touch/Views/FirstView.cs
protected IVisible VisibleViewModel
{
get { return base.ViewModel as IVisible; }
}
public override void ViewDidAppear(bool animated)
{
base.ViewDidAppear(animated);
VisibleViewModel.IsVisible(true);
}
public override void ViewDidDisappear(bool animated)
{
base.ViewDidDisappear(animated);
VisibleViewModel.IsVisible(false);
}
I am using javax.microedition.lcdui.Canvas for drawing my string on the screen. But I also need one dialog window for some purpose. So I am using lwuit package (com.sun.lwuit.Dialog) for showing dialog window when key pressing.
So in my program I just included that package and create the object of the Dialog box. While running my application, it is terminated unexpectedly.
I just included the following lines...
import javax.microedition.lcdui.Canvas;
import com.sun.lwuit.Dialog;
public class Mycanvas extends Canvas implements CommandListener
{
Dialog dialog = new Dialog();
//some other remaining codes for my canvas...
}
So, is it possible to show lwuit dialog window with lcdui canvas?
I would say it's possible but it will increase size of the app significantly. Whenever you need your dialog you can init LWUIT Display and use LWUIT Forms and Dialogs.
I would better to implement some really simple Dialog ourselves. It's not really much work. Or use another third party solution.
My Idea is create an user defined Item which extends from CustomItem for dialog.But it is difficult to code the complete implementation.Better u search for any third pary jar file which already implemented dialog box.