How to customize a popup from a toolbar button in Kentico.EMS12.MvcComponents.Widget.RichText - kentico

I recently added the nuget packaget for Kentico.EMS12.MvcComponents.Widget.RichText to take advantage of the new froala based widget and inline editor. This version (based on froala documentation) is very customizable. Unfortunately the implementation of the nuget package appears to have hidden the base froala library therefore making a big part of the froala documentation not applicable. I was curious if someone could tell me how I can go about making the calls to customize a toolbar command. The big issue I had with my initial attempts was I couldn't access the base froala library which means I couldn't make the calls listed in the documentation (for adding a command for example). I looked at using an event but still didn't seem to be able to get code running in an appropriate context.

The customization of the Rich text widget is a brand new feature and has just been documented here: https://github.com/Kentico/ems-mvc-components/wiki/Implementing-Rich-text-editor-plugins.
Kentico will pass the FroalaEditor object as a function parameter into your plugin.
Your plugin can be pushed into the Rich text plugins register. See plugins.push(myButtonPlugin);
(function (pageBuilder) {
var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
var plugins = richTextEditor.plugins = richTextEditor.plugins || [];
var sampleButtonPlugin = function (FroalaEditor) {
FroalaEditor.DefineIcon("sampleButtonIcon", { NAME: "star", SVG_KEY: "help" });
FroalaEditor.RegisterCommand("sampleButton", {
title: "Sample Button",
icon: "sampleButtonIcon",
callback: function () {
// Use the current context to work with the content of the inline editor.
console.log(this.html.get());
}
});
};
plugins.push(myButtonPlugin);
})(window.kentico.pageBuilder);

Related

New Action Definitions on a custom screen

I am trying to implement the new action definitions on a custom screen in 2020R1 in preparation for 2021R2. I cant seem to get these actions to group into folders, and the last action will not hide. What am I missing?
This is in the graph definition:
public override void Configure(PXScreenConfiguration graph)
{
var context = graph.GetScreenConfigurationContext<NGBiopsyEntry, NGBiopsy>();
context.AddScreenConfigurationFor(screenConfig =>
screenConfig
.WithActions(actions =>
{
actions.Add(a=>a.ActionSubmitBiopsy);
actions.Add(a=>a.ActionRefreshWorkTickets,
config=>config
.InFolder(FolderType.ActionsFolder));
actions.Add(a=>a.ActionStartPGTMTesting,
config=>config
.InFolder(FolderType.ActionsFolder));
actions.Add(a=>a.ActionSetEmbryoIDGen,
config=>config
.InFolder(FolderType.ActionsFolder)
.IsHiddenAlways());
}));
}
But still I get this:
Even after restarting the application, rebuilding the dll, publishing the customization project. Is there another setting I Am missing?
The new workflow is pretty entertaining to sort out. There was a great presentation at Summit this year, so keep an eye out for when the post the video to get a lot of great additional detail. This should be a pretty easy fix, but it isn't universal so I'll share the 2 ways you might have to add your menu actions.
The first thing that got my attention is that your menu actions are not in the Actions folder as you specified. That's a pretty clear sign that the context isn't quite right. I break mine into 2 parts, and I think you set yours with a single method.
In both cases, you need to start by overriding Configure, specifying the graph and primary DAC. Then you define a Configure using your WorkflowContext specific (again) to your graph and primary DAC. After that, things start to become a little more complicated.
Is this for a new custom screen that has no screen configuration yet, or are you extending a workflow that already exists? In the first example, I am adding a couple of print actions to the POReceiptEntry graph which already has a workflow (and screen configuration) defined. Also, I'm adding my action from the POReceiptEntry_Extension class, so I need to specify that on the Add.
public override void Configure(PXScreenConfiguration config)
=> Configure(config.GetScreenConfigurationContext<POReceiptEntry, POReceipt>());
protected virtual void Configure(WorkflowContext<POReceiptEntry, POReceipt> context)
{
context.UpdateScreenConfigurationFor(screen =>
{
return screen
.WithActions(actions =>
{
actions.Add<POReceiptEntry_Extension>(
g => g.printItemLabel,
a => a.InFolder(FolderType.ActionsFolder)
);
actions.Add<POReceiptEntry_Extension>(
g => g.printSOLabel,
a => a.InFolder(FolderType.ActionsFolder)
);
});
});
}
When adding an action to a custom screen, the screen configuration is not created until you create it. In this example, you will see UpdateScreenConfigurationFor is changed to AddScreenConfigurationFor. Also, you will see that Add does not specify the extension this time because the actions are defined in my custom (base) graph.
public override void Configure(PXScreenConfiguration config)
=> Configure(config.GetScreenConfigurationContext<MyGraph, MyDAC>());
protected virtual void Configure(WorkflowContext<MyGraph, MyDAC> context)
{
context.AddScreenConfigurationFor(screen =>
{
return screen
.WithActions(actions =>
{
actions.Add(
g => g.myAction,
a => a.InFolder(FolderType.ActionsFolder)
);
});
});
}
Notes to other readers:
I'm using 2021R1, and for everyone else's benefit, I've talked with Kyle and learned he is using 2020R1. His specific implementation is a bit more complex, and he needed to add
.AddDefaultFlow(workflow => workflow...
to create his default workflow. This can be done in the screen definition as well from the screen editor in the customization project, although I cannot recall if our SysAdmin did that or if AddScreenConfiguration in my example handled it for me.

How can I know the retained class name or keyword when I use navigation framework in Android Studio?

The following code is from the project at https://github.com/mycwcgr/camera/tree/master/CameraXBasic
The project use the latest navigation framework, I find there are some retained class name such as CameraFragmentDirections, GalleryFragmentArgs.
The system have no prompt information for these class name, must I remember these keywords by myself?
Code
/** Method used to re-draw the camera UI controls, called every time configuration changes */
#SuppressLint("RestrictedApi")
private fun updateCameraUi() {
// Listener for button used to view last photo
controls.findViewById<ImageButton>(R.id.photo_view_button).setOnClickListener {
Navigation.findNavController(requireActivity(), R.id.fragment_container).navigate(
CameraFragmentDirections.actionCameraToGallery(outputDirectory.absolutePath))
}
}
/** Fragment used to present the user with a gallery of photos taken */
class GalleryFragment internal constructor() : Fragment() {
/** AndroidX navigation arguments */
private val args: GalleryFragmentArgs by navArgs()
}
No you do not need to remember these things by yourself, if you know of a trick.
For example, if you don't remember the "keyword" Directions, but you know you want to do something related to CameraFragment, you can start typing e.g. CameraFragm in Android Studio. It will then suggest CameraFragment and CameraFragmentDirections for you. That way you can find CameraFragmentDirections easily even though you did not remember the keyword Directions.
There are not that many keywords to worry about though. After working with the Navigation framework for a while, you will remember them all.
If you are curious, you can find the generated classes here after a build:
./app/build/generated/source/navigation-args/...
e.g. after a debug build:
./app/build/generated/source/navigation-args/debug/com/android/example/cameraxbasic/fragments/CameraFragmentDirections.java
If you are even more curious, the code that generates these classes is here:
https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-master-dev/navigation/navigation-safe-args-generator/src/main/kotlin/androidx/navigation/safe/args/generator/java/JavaNavWriter.kt
There you can for example find this code:
internal fun Destination.toClassName(): ClassName {
val destName = name ?: throw IllegalStateException("Destination with actions must have name")
return ClassName.get(destName.packageName(), "${destName.simpleName()}Directions")
}
which is the code that decides what name CameraFragmentDirections gets. (Note "${destName.simpleName()}Directions" at the end.)

Problem with binding to MvxView with Xamarin.iOS and MvvmCross

I have a problem with implementing following scenario using Xamarin.iOS and MvvmCross (6.2.3.0). I have a view and in it's viewmodel I have a property which is a list of objects. I need to dynamically generate a label and a textfield for each of this list entry on my view. So I decided to implement a custom view for this. Here is what I tried so far:
In my viewcontroller, in CreateView I simply add my custom UIView. I can see it's content on my view. In ViewDidLoad() I create bindings:
private void CreateBindings()
{
var set = this.CreateBindingSet<MyController, MyViewModel>();
set.Bind(myCustomControl).For(x => x.DataContext).To(vm => vm.MyListOfObjects);
set.Apply();
}
MyCustomControl code is as follows:
public class MyCustomControl : MvxView
{
public MyCustomControl() {
//DataContext is always null here!
//I'd like to get access to list of objects here, add controls for each entry and make sure they are binded to a viewmodel's list of objects somehow.
}
}
I noticed that the list of objects in my viewmodel is set later than a constructor call for MyCustomControl is being made, so it makes sense that DataContext in MyCustom control is null. I'm missing something obvious I believe. Can someone point me in a proper direction? I would be very grateful.
I tried this example, which is exactly what I'm trying to achieve, but no luck so far ;(
N=32 - ViewModels and MvxView on the iPad - N+1 days of MvvmCross
https://www.youtube.com/watch?v=cYu_9rcAJU4&list=PLR6WI6W1JdeYSXLbm58jwAKYT7RQR31-W&index=35&t=1649s
Take a look at 23:43 of the video you posted.
You should do the view binding inside a DelayBind method.
this.DelayBind(() => {
var set = this.CreateBindingSet<MyCustomControl, MyItemViewModel>();
set.Bind(badgeLabel).For(v => v.Text).To(x => x.BadgeText);
set.Bind(topSummary).For(v => v.Text).To(x => x.TopSummary);
set.Bind(bottomSummary).For(v => v.Text).To(x => x.BottomSummary);
set.Bind(this.Tap()).For(v => v.Command).To(x => x.Edit);
set.Apply();
});
MvvmCross will do the binding for you.
Also Mind that the proper types have to be passed to CreateBindingSet.
On a side node, MvvmCross N+1 videos are from 2013 and some things has changed since then.
You can find some good examples there but sometimes it just won't work anymore.
If you are new to MvvmCross, download the source code of Playground project for reference:
https://github.com/MvvmCross/MvvmCross/tree/develop/Projects/Playground
and join the #mvvmcross slack channel if you need more help
https://xamarinchat.herokuapp.com/
MvvmCross is really great... once you grasp the basic concepts.

Azure functions structure from a Git repository

I have a C# class that does an address lookup. I want to expose this as an Azure function. I've been going through the documentation but can't see how I can/if it's possible to do the following:
I have a Git repository in Team Services that contains a class library of my AddressLookup. Can my Function reference this project?
If I look at the folder structure of the site I can see it has copied over all the source files from the Git repository, can I get it to build the solution or does it literally just pull all the files?
Where in the solution do I put the function? Do I create a solution folder of the name of the function and place the relevant files in there?
My AddressLookup class returns an object that is defined in the class library. Will the function be able to use and return this?
Thanks
Alex
Follow-up to Q1: Are you trying to setup CI? For continuous integration with Azure Functions, you may reference the following:
https://azure.microsoft.com/en-us/documentation/articles/functions-continuous-deployment/#setting-up-continuous-deployment
http://flgmwt.github.io/azure/azure-functions/c-sharp/2016/04/04/azure-fns-with-ci.html
--Update 10/17--
Specific to Team Services, here are the steps:
Make sure that your VSTS account is linked to your Azure Subscription. Follow the instructions in this article.
Navigate to the Functions Portal for your Function App and click on Function app Settings -> Configure continuous integration.
In the Deployements blade, click on Setup and configure your Deployment source information (see sample snapshot below). Click on the OK button. Wait for the sync to succeed. Close the Deployments blade.
Give it a minute and refresh your Functions Portal session. You should now see the function added to your Function site. The snapshot below is my AddressLookup function that was synced from my Team Services project named MyFirstProject.
Note the disclaimer message above the Code editor. If you hook up CI for your Function, you will not be able to edit it in the Functions Portal. Since this particular example requires a request body, you will need to test it using Postman.
--End of update 10/17--
Answer to Q2:
Here's a good documentation describing the folder structure of Azure Functions:
https://azure.microsoft.com/en-us/documentation/articles/functions-reference/
I also recommend the follow-up documentation specific to C# development for Azure Functions:
https://azure.microsoft.com/en-us/documentation/articles/functions-reference-csharp/
Answer to Q3 & Q4: I will attempt to answer these by providing a sample implementation. I don't have any context on the implementation of your AddressLookup library, however, in the interest of providing an example, I am going to take a wild leap and assume that it is a library that will perform some Geocoding operations. Assuming again that you want to use this library in an HTTP-triggered Function, you may begin by first generating the AddressLookup.dll and then uploading it to the bin folder inside your Function. You may then reference that DLL from your Function script.
For instance, using this article as a reference, I generated a AddressLookup.dll library in Visual Studio that has the following implementation. This DLL will serve as a proxy for your AddressLookup library so that I can demonstrate how we can use it in a Function.
using System;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Xml.Linq;
namespace AddressLookup
{
public class GeoLocation
{
public double Longitude { get; set; }
public double Latitude { get; set; }
}
public class GeoCoder
{
private const string geoCodeLookupUrlPattern =
"https://maps.googleapis.com/maps/api/geocode/xml?address={0}&key={1}";
private const string addressLookupUrlPattern =
"https://maps.googleapis.com/maps/api/geocode/xml?latlng={0},{1}&key={2}";
private string _apiKey = null;
public GeoCoder(string apiKey)
{
if (string.IsNullOrEmpty(apiKey))
{
throw new ArgumentNullException("apiKey");
}
_apiKey = apiKey;
}
public GeoLocation GetGeoLocation(string address)
{
GeoLocation loc = null;
string encodedAddress = HttpUtility.UrlEncode(address);
string url = string.Format(geoCodeLookupUrlPattern, encodedAddress, _apiKey);
WebRequest request = WebRequest.Create(url);
using (WebResponse response = request.GetResponse())
{
using (Stream stream = response.GetResponseStream())
{
if (stream != null)
{
XDocument document = XDocument.Load(new StreamReader(stream));
XElement longitudeElement = document.Descendants("lng").FirstOrDefault();
XElement latitudeElement = document.Descendants("lat").FirstOrDefault();
if (longitudeElement != null && latitudeElement != null)
{
loc = new GeoLocation
{
Longitude = Double.Parse(longitudeElement.Value, CultureInfo.InvariantCulture),
Latitude = Double.Parse(latitudeElement.Value, CultureInfo.InvariantCulture)
};
}
}
}
}
return loc;
}
public string GetAddress(GeoLocation loc)
{
string address = null;
string url = string.Format(addressLookupUrlPattern, loc.Latitude, loc.Longitude, _apiKey);
WebRequest request = WebRequest.Create(url);
using (WebResponse response = request.GetResponse())
{
using (Stream stream = response.GetResponseStream())
{
if (stream != null)
{
XDocument document = XDocument.Load(new StreamReader(stream));
XElement element = document.Descendants("formatted_address").FirstOrDefault();
if (element != null)
{
address = element.Value;
}
}
}
}
return address;
}
}
}
Now, let's create an HTTP-Triggered Function by performing the following steps:
Go to the Functions Portal. Create a Function using the HTTP
Trigger - C# template.
Fill in the name (e.g., AddressLookup) and authorization level (e.g., Anonymous). You should now see a Function named AddressLookup created with some pre-populated code.
On the left pane, click on the Function app settings button.
Optional: Click on Configure app Settings. Under the "App settings" section, add a value for the key GoogleMapsAPIKey with your api key, then click on the Save button. Note: If you skip this step, then you will need to hard-code the key in your function code later.
Next, use the Kudu console to upload your DLL. Click on the Go to Kudu button. This will launch a new browser window
with a cmd console. Type the following to navigate to your
Function directory,
cd site\wwwroot\AddressLookup
Create a bin folder by typing mkdir bin at the command prompt as follows,
Double-click on the bin folder and upload (see "Add files") the AddressLookup.dll into the folder. When you are done, you should a similar snapshot below,
Go back to the Functions Portal. In your Function's editor, at the bottom of the Code section, click on View Files. You should now see the newly created bin folder as follows,
Replace the contents of the pre-populated Function script with the following code
#r "AddressLookup.dll"
using System;
using AddressLookup;
using System.Net;
public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
log.Info($"C# HTTP trigger function processed a request. RequestUri={req.RequestUri}");
// Reading environment variable from App Settings, replace with hardcoded value if not using App settings
string apiKey = System.Environment.GetEnvironmentVariable("GoogleMapsAPIKey", EnvironmentVariableTarget.Process);
// Get request body
dynamic data = await req.Content.ReadAsAsync<object>();
string address = data?.address;
string name = data?.name;
GeoCoder geoCoder = new GeoCoder(apiKey);
GeoLocation loc = geoCoder.GetGeoLocation(address);
string formattedAddress = geoCoder.GetAddress(loc);
HttpResponseMessage message = null;
if (name == null)
{
message = req.CreateResponse(HttpStatusCode.BadRequest, "Please pass a name in the request body");
}
else
{
var msg = $"Hello {name}. Lon: '{loc.Longitude}', Lat: '{loc.Latitude}', Formatted address: '{formattedAddress}'";
message = req.CreateResponse(HttpStatusCode.OK, msg);
}
return message;
}
Click on the Save button.
In the "Run" section, supply the following request body,
{
"name": "Azure",
"address": "One Microsoft Way Redmond WA 98052"
}
Click on the Run button.
You should see some log entries similar to the following,
2016-10-15T03:54:31.538 C# HTTP trigger function processed a request. RequestUri=https://myfunction.azurewebsites.net/api/addresslookup
2016-10-15T03:54:31.773 Function completed (Success, Id=e4308c0f-a615-4d43-8b16-3a6afc017f73)
and the following HTTP response message,
"Hello Azure. Lon: '-122.1283833', Lat: '47.6393225', Formatted address: '1 Microsoft Way, Redmond, WA 98052, USA'"
Since this is a HTTP-triggered Function, you may also test your Function using Postman. See snapshot below,
If you upload your own DLL in step 5 and edit the Function code to call your library, the Function should work just as well.
Is the assembly you want to reference frozen, or do you want to see updates? If you don't want to see updates, see the answer by Ling Toh.
But if you want to see updates when the assembly updates:
Link your function to a some form of continuous delivery. The official documentation explains how to do this. At the moment, you seem to need a separate git repository, VSTS project (or whatever) to do this easily. (It is possible to edit the deployment process in Kudu, but I would avoid that if you possibly can).
The functions project should contain only the functions code themselves. So it should contain something like the followling:
global.json
host.json
packages.config
Web.config
function1/
function1/run.csx
function1/project.json
function1/function.json
Where you should replace function1 by the name of your function.
Once you've configured this to push to your functions host, you're most of the way to where you want to be. Next, add a function1/run subdirectory where you place yourAssembly.dll. This should be automatically copied here on a successful build of the assembly project. I don't have experience of VSTS to know exactly the best way to do this, so you might need to ask another question.
You've now placed the assembly in the right place. You now refer to it by adding the assembly reference line to the top of your run.csx:
#r "yourAssembly.dll"
Note that all of the references have to be before everything else at the top of the run.csx. So you can put it after other references, but it has to be before anythign else, including load specifications.
Note that for custom assemblies you include the .dll and quote the file, whereas for framework assemblies that aren't referenced by default, you don't
In an ideal world, this will be enough.
But functions doesn't trigger a rebuild if the assembly is updated at the moment, only if project.json, run.csx or function.json is updated. So as part of this process, I then look at the end of the file and add or remove a blank line. It needs to be meaningless (so that you're not changing something important), but enough for your version control tool to think that the file has changed. Clearly, this step is not necessary if you've also made other changes to the file.
If you're using git, you'd now commit and push the changes up. Functions will see that function has changed, and recompile. You should see this in the log pane in the function itself.
Note that if you have two functions using the same dependent assembly, you need to copy it into both function folders; this can't be shared.

Multiple Views for a Document in MDI Application MFC

I have a MDI application in which there are some reports and the Reports are printed and print preview in way that the was given by the MFC Printing Architecture.
But now the scenario changed and the Reports need to be formatted as a HTML File and need to be shown in the different perspective, based on a preference. I have choose a solution based on the Application architecture as there are many Document/View in my CWinApp. Created all Doc/view Templates there and the new Doc/View will be created based on the setting, once the application starts.
class CMyWinApp: public CWinApp
{
public:
virtual BOOL InitInstance();
protected:
}
BOOL CMyWinApp::InitInstance()
{
// Lot of Code Here
CreateDocumentTemplates();
}
void CMyWinApp::CreateDocumentTemplates()
{
// Some Other Doc/Templates are here
if(m_bNewView) // Based on the Setting I am creating the new View and Old Doc
{
pDocTemplate = new CMultiDocTemplate(
IDR_REPORTS,
RUNTIME_CLASS(CMyDoc),
RUNTIME_CLASS(CMyFrame), // custom MDI child frame
RUNTIME_CLASS(CMyNewView));
pDocTemplate->SetContainerInfo(IDR_TYPE_CNTR_IP);
AddDocTemplate(pDocTemplate);
}
else // This is a Old View and Doc
{
pDocTemplate = new CMultiDocTemplate(
IDR_REPORTS,
RUNTIME_CLASS(CMyDoc),
RUNTIME_CLASS(CMyFrame), // custom MDI child frame
RUNTIME_CLASS(CMyView));
pDocTemplate->SetContainerInfo(IDR_TYPE_CNTR_IP);
AddDocTemplate(pDocTemplate);
}
}
Now the scenario is, this preference can be set anytime and the further Reports need to be shown in a appropriate context.
How this can be achieved on the run time? Please help me :(
In your app class, create and save both CMultiDocTemplate pointers from your CreateDocumentTemplates function and use these to create your documents on demand(e.g override ID_FILE_NEW/ID_FILE_OPEN or similar). Look at OpenDocumentFile of CDocTemplate.
Then in your OnFileNew function or similar you can use something like this:
if(m_bNewView) {
m_pNewDocTemplate->OpenDocumentFile(...);
}
else {
m_pOldDocTemplate->OpenDocumentFile(...);
}
I would integrate CMyNewView in CMyView, if you need to switch the view dynamically. If you work with at least Visuals Studio 2008 (incl. feature pack), I recommend deriving your view class from CTabView to switch the view of the document using a handy tab next to the horizontal scrollbar of the child window.

Resources