Wrap Up – Third Sydney Episerver Meetup

First I want to say thanks @Nicola and 1990 Digital and Episerver for hosting this session. I learned a lot and I’m started starving for the next meetup!

 

Nicola spoke about her new tool ‘EpiserverCmsAudit’. This tool is really awesome and can help you to find the usage of your content type. Very nice dashboard and very easy to install and it is FREE! So if you to give it a go to her post to read more about it and you can take a look at the source code or just install the Nuget package This is quite a bit awesome while website moving to DXC as they can build many websites and many contents! So with this tool, you as a dev, tester or content editor can make sure your change impact on all aspect of your app! GREAT JOB!

 

I spoke about Episerver Headless CMS, eCommerce and how you can integrate that with Microsoft Web Bot. This would be important as Bots are more human-friendly – having said that the concept is still at a very early stage. The concept is quite simple, Web Bot gets the query from user pass to Luis.ai and passes the action to Episerver to get the data back and pass it back to Bot! If you feel like you need more info, you can download the presentation and the source code of the bot can be found here and the bot source code can be found here. If you are interested and still have a question just comment here!

I’m going to speak about this in more detail in DDD, so if you keen to learn more you just need to get the ticket!

How to pass configuration to your custom editor in EPiServer

Recently I’m working on a project which has a requirement. We need focal point selector for an image. So the idea is you pick a focal point and application based on requested image size crop the image based on selected focal point. So I store the focal point (x,y) as a comma separated in string.

Now we want make the EPiServer custom editor named “FocalPoint”. There are many post about this so I ignore this part but what I need to pass current image URL to be passed to my editor. So for doing this we need EditorDescriptor as below:

Now we want to change the code to pass current image URL to editor, so editor can load the image and user can select the focal point. Code below is a magic which need to be injected into ModifyMetadata method.

And now we can access the value in our edit in JS:

And you can see “imageURL” is being passed to our javascript code and we can use it.

WCF RESTful .Net 4.0

In this post we want to introduce the project that hosts the WCF RESTful service and a client which is consuming the service with AJAX and jQeury. You need to have VS2010 and .Net 4.0 and being sure that you select the “.Net 4.0” when you want to create projects. So first step is creating new blank solution, then create new “WCF Service Application” and named it as “Server”:

Now have your service the only change that you need to apply is on web.config file. Let’s change it as below:

[cc lang=”XML” width=”100%”]

















[/cc]

Visual Studio has created the sample service, operation contract and data contract for you that should fine for our sample and your server for hosting RESTful service has been completed. Next step is to setup the client. You need to ensure that you have internet connection while loading the test client. Create new HTML file and place the code below as a content:

[cc lang=”HTML” width=”100%”]








[/cc]
Now run your service by pressing the “F5” in Visual Studio and open an “Internet Explorer” and open the created HTML file. Now the HTML code will contact the RESTful service and pass two values to the service (as a JSON object) and show the result value from server.

Easy, first WCF fully server and client

In this post I’m going to show how you easy steps to how you can create a server/client application base on WCF. Calling and receiving information from server to client and reverse. First of all create new solution called “ServiceHost”. Open Visual Studio 2010 and click on “File”->”New Project”:

And top section select “.Net Framework 4” and then from the “Installed Templates” select “Other Project Types” and then “Visual Studio Solutions”. On the right hand side select “Bank Solution”. Select the “Location” and solution name. Finally click on “OK”:

Now from the “File” menu click on “Add” and select “NewProject”:

From the list select “Class Library” and change the name to be “ServiceLibrary”:

 

From the solution explorer add a reference “System.ServiceModel” to the “ServiceLibrary” project.

Then:

 

From the “Solution Explorer” deleted automatically generated class file called “Class1.cs” and create new interface file called “ICalculator”:

 

Change the interface to become a public interface. Add extra using “System.ServiceModel” to the header, add “ServiceContract” attribute above the interface. Add new method called as below with “OperationContract” attribute.

Now create new class file called “Calculator”. Inherit the class from the “ICalculator” interface.

Now implement the interface as below:

 

From the menu “File”->”Add”->”New Project”, create a new console application project called “Server”:

And add the reference of “System.ServiceModel” to new created project called “Server”. Add another reference to “ServiceLibrary” project. Then build the project.

Now add new application configuration file to “Server” project.

Then:

Now build your project and you should get successful message from compiler. Now we need to configure the application to host the WCF service. So we need to change the app.config file first and introduce the service and configure it properly. For doing that open the “app.config” and change it to be like this:

 

This is the time for setting up your server runner. Open the “Solution Explorer”->”Server”->”Program.cs” and change it as below:

 

If you are using “Windows 7” or “Windows VISTA” when you want to start the application it may show you this message:

You can check the resolution here or easily run the “cmd.exe” in administrator mode and replace the command below and change the computer name and current user:

“netsh http add urlacl url=http://+:8082/ user={Computer Name}\{Current User}”

Now sever is ready and it is a time for building the client application. Add new “Console Application” project to your solution called “Client”. Then we need to add the reference of “Server” service to “Client” application. For doing that first run the server “Console Application” and make sure that service is running properly. For checking the server open an IE and change the address to http://localhost:8082 and should get the message as below:

 

After making sure that the service is working perfectly, for adding the “Service Reference” to “Client” application, right click on “Client” project and select “Add Service Reference”.

Submit the http://localhost:8082 to the address field and press the “Go” button”:

Then change the “Namespace” to “CalculatorClient” and press the “OK” button. Then open the “Client”->”Program.cs” and change it as below:

Make sure that the “Server” is running and then run the “Client”. You can the result as below:

 

You can download the sample from here