The current project I'm on is utilizing tenant sites. With each site, we want the ability to change the logo through out the tenant site by modifying the its settings (on the admin page, settings > general).
I've added two text fields to the site settings by following this well documented tutorial. However, I'd like the user to be able to pick the logos using the media picker instead of typing in the path.
Currently I have a LogoBarSettings part with its record, driver and handler. I'm not sure how to add the media picker to the my LogoBarSettings and even if I did, must I also create another handler, driver, and record for it? I can't imagine I would but I'm pretty stuck at this point.
Can someone provide some direction on this?
Here is my LogoBarSettings
public class LogoBarSettings : ContentPart<LogoBarSettingsPartRecord>
{
public string ImageUrl
{
get { return Record.ImageUrl; }
set { Record.ImageUrl = value; }
}
public string ImageAltText
{
get { return Record.ImageAltText; }
set { Record.ImageAltText = value; }
}
}
The MediaPicker is invoked through Javascript, so you shouldn't need to change any of your model classes. When the MediaPicker is loaded for a page, it sets up a jQuery event handler for all form elements on the page. Triggering the event orchard-admin-pickimage-open will open the MediaPicker. Supply a callback function to capture the picked media.
Here is a quick example that you can run in Firebug or Chrome Developer Tools from a page which has the MediaPicker loaded, such as a Page editor:
$('form').trigger("orchard-admin-pickimage-open", {
callback: function(data) {
console.log(data);
}})
This should print something similar to this:
Object {img: Object}
img: Object
align: ""
alt: ""
class: ""
height: "64"
html: "<img src="/Media/Default/images/test.jpg" alt="" width="64" height="64"/>"
src: "/Media/Default/images/test.jpg"
style: ""
width: "64"
__proto__: Object
__proto__: Object
The BodyPart editor integrates Orchard's MediaPicker with TinyMce, so you can start looking at that module for a more complete example, specifically Modules\TinyMce\Scripts\plugins\mediapicker\editor_plugin_src.js.
Related
I am trying to create an app single page by using Getx.
When the user changes the URL, the page will change some widgets but Getx still moves to the same page(Observed from the movement when turning pages).
Now, I am using:
getPages: [
GetPage(
name: "Page 1",
page: () {
globals.page= "Page 1";
return Home();
}),
GetPage(
name: "Page 2",
page: () {
globals.page= "Page 2";
return Home();
}),
]
How to solve it?
I am looking like:
getPages: [
GetPage(
name: ["Page 1","Page 2"],
page: () => Home(),
refreshPageWidget: false, //Don't return widget from page:
onSamePage: (String url) { //Do when routing to original page.
if(url == "Page 1"){
globals.page= "Page 1";
}else{
globals.page= "Page 2";
}
}),
]
Can Getx(any package) do this?
It is possible but not complete.
You can change the URL by using
window.history.pushState(null, 'url name', URL);
changePageWidget();
setState((){});
But This will make this app has only one route.
So it can't go back or forward by using the arrow navigation button in the web browser (Although at present this flutter web is not good enough for this.) and you can't use Navigation to manage this page. You must create the function to manage this page.
The big issue with this method is You can't use stateFullWidget
because the stateFullWidget will reset itself when the page widget was changed. So, you need to use state management.
In summary, you can do that as mentioned above but you can't use the arrow navigation button in the web browsers, and you can't use some functions that the flutter makes easy to use.
For me, I am using these steps for some pages that have a tab bar(only change URL).
Can someone please guide me on how to create layout elements in Orchard 1.9. I couldn't find any resource online.
In general, creating a new layout element is similar to creating a new part. There is a driver and a few views involved in the process. To the point - you need to implement as follows:
An element class.. Class that inherits from Element, which contains all the element data. A model, so to speak.
A driver. Class that inherits from ElementDriver<TElement>, where TElement is the type you created above. Each element has it's own driver that handles displaying admin editor (and the postback) and frontend display views.
Shapes. All shapes should be placed under /Views/Elements/ folder, by convention.
Display shape. Named after your element, ie. MyElement.cshtml. This one renders your element on frontend.
Design display shape.. Named after your element, with .Design suffix, ie. MyElement.Design.cshtml. This one renders your element inside the layout editor.
Editor shape.. This one should be put in /Views/EditorTemplates/ folder instead. Default naming convention is Elements.MyElement.cshtml. It renders the editor shown when you drop a new element on layout editor canvas.
With all above done, your new element should appear in the list of elements on the right side of the layout editor, ready to use.
If you want to do some more complex elements, please check the existing implementations. Layouts module has a very decent architecture so you should get up to speed pretty quickly. Just keep in mind the necessary steps I wrote above.
To create a custom layout element first create a class that inherits from Element. Element is found in the Orchard.Layouts namespace so you need to add a reference. To follow Orchard standards put this file in a folder called Elements.
public class MyElement : Element
{
public override string Category
{
get { return "Content"; }
}
public string MyCustomProperty
{
get { return this.Retrieve(x => x.MyCustomProperty); }
set { this.Store(x => x.MyCustomProperty, value); }
}
}
Next, create a driver class in a folder called Drivers. This class inherits from ElementDriver<TElement> and likely you will want to override the OnBuildEditor and OnDisplaying methods. OnBuildEditor is used for handling creating our editors shape and updating our database when the editor is saved. OnDisplaying is used when we need to do things when displaying our element. Oftentimes, you will want to add properties to the shape which can be done with context.ElementShape.MyAdditionalProperty = "My Value";
public class MyElementDriver : ElementDriver<MyElement>
{
protected override EditorResult OnBuildEditor(MyElement element, ElementEditorContext context)
{
var viewModel = new MyElementEditorViewModel
{
MyCustomProperty = element.MyCustomProperty
};
var editor = context.ShapeFactory.EditorTemplate(TemplateName: "Elements.MyElement", Model: viewModel);
if (context.Updater != null)
{
context.Updater.TryUpdateModel(viewModel, context.Prefix, null, null);
element.MyCustomProperty = viewModel.MyCustomProperty;
}
return Editor(context, editor);
}
protected override void OnDisplaying(Reddit element, ElementDisplayContext context)
{
context.ElementShape.MyAdditionalProperty = "My Value";
}
}
We then just need our views. Our editor view goes into Views/EditorTemplates. The file name needs to be what we set the template name of the editor shape. In our case the view name will be Elements.MyElement.cshtml.
#model MyNameSpace.ViewModels.MyElementEditorViewModel
<fieldset>
<div>
#Html.LabelFor(m => m.MyCustomProperty, T("My Custom Property"))
#Html.TextBoxFor(m => m.MyCustomProperty, new { #class = "text medium" })
</div>
</fieldset>
Finally, we just need a view for our frontend. This view goes into the following folder Views/Elements. The name of the view file is the same as our element class name. For this example the file would be called MyElement.cshtml.
#using MyNameSpace.Elements
#using MyNameSpace.Models
#{
var element = (MyElement)Model.Element;
}
<h1>#element.MyCustomProperty</h1>
You will then have a new element that you can drag into your layout with the layout editor.
For more details on creating an element from start to finish check out my blog post on creating a Reddit element.
I have an editable text web part on a page template. It has a custom HTML envelope before and after the text. How can I hide the whole thing, envelope included, if the editable text is empty?
I need to hide it because the envelope adds stylized markup that shouldn't be visible when there is no text.
Can it be done with a K# snippet on the Visible property? I'm unclear how interrogating a document's property works.
Thanks!
Try this as the "Visible" property:
{% (ViewMode != "LiveSite") || (CMSContext.CurrentDocument.editabletext != "") #%}
Change "editabletext" to whatever you have for your web part control ID.
I'm not familiar with Kentico but these solutions might help. They may not address your problem specifically but might aid in a solution.
CMSEditableImage Extension Method
I came up with a way to check this, I added an extension method for
the CMSEditableImage class that takes the CurrentPage PageInfo object
to check the value of the editable region, don't know if this is the
best way or not, but here's the code.
public static bool IsPopulated(this CMSEditableImage editableImage, PageInfo currentPage)
{
bool isPopulated = false;
string value = currentPage.EditableItems.EditableRegions[editableImage.ID.ToLower()].ToString();
if (!string.IsNullOrEmpty(value))
{
value = value.ToUpper();
isPopulated = (value == "<IMAGE><PROPERTY NAME=\"IMAGEPATH\"></PROPERTY></IMAGE>") ? false : true;
}
return isPopulated;
}
via http://devnet.kentico.com/Forums/f19/fp5/t4454/Empty-CMSEditableImage.aspx
JavaScript Method
The webcontainer needs an id, example:
<h2 id="webpart-header">Headline</h2>
Then I have a small javascript function that is attached in an
external js file:
/* Hide Webcontainer via javascript if empty*/
function hideLayer(element) {
elem = document.getElementById( element );
elem.style.display = "none";
}
Now in the wep part configuration, at no data behaviour, you uncheck the checkbox and call the js function by entering following
script in the no record found text: hideLayer("webpart-header");
Whereby webpart-header the id name of your container is. You could
also have a more complex <div> structure here.
via http://devnet.kentico.com/Forums/f22/fp3/t4180/Webcontainer-and-hide-if-no-data.aspx
I am trying to build a custom button in newest BlackBerry 10 platform.
The button should change background image when it is clicked and then change it back when it is clicked the second time.
The button logic is fairly simple: once clicked, I check for the type of image currently in the button and change the image source.
I started with a basic QML custom control which looks like this (stripped of labels and other unimportant things):
import bb.cascades 1.0
Container
{
id: root
layout: DockLayout
{
}
function clickMe()
{
var source = myImage.defaultImageSource.toString();
console.log(source);
if (source.endsWith("image.png"))
{
myImage.defaultImageSource = "asset:///images/image_pushed.png";
}
else
{
myImage.defaultImageSource = "asset:///images/image.png";
}
}
ImageButton
{
id: myImage
defaultImageSource: "asset:///images/image.png"
}
onCreationCompleted:
{
myImage.clicked.connect(root.clickMe);
}
}
ImageButton click event is connected to JavaScript function clickMe. The function fires and the URL is logged to console correctly.
The problem is the IF clause, because the image_pushed.png is never set. Why is this the problem and how can I implement this button?
I am looking around for a only QML solution for this problem and I found this information:
the defaultImageSource property is of type QUrl, which does contain
toString() method.
toString() method returns QString, which indeed has function endsWith.
my QML reference: http://qt-project.org/doc/qt-4.8/qstring.html#endsWith
Thanks.
Within QML QString instances appear to be a normal JavaScript strings. This mapping is done automatically. And Javascript strings don't have a endsWith method. You can use the search method with an regular expression to achieve the same.
if (source.search(/image\.png$/ !== -1) { /* ... */ }
I think you can create more simple way by using property
for example:
Control{
id : myControl
property bool state
ImageButton{
defaultImageSource : state ? "firstImageAsset.png" : "secondImageAsset.png"
onClick :{
myControl.state = !myControl.state
}
}
}
I'm very new with orchard.
To learn orchard module development, I followed the documentation and tried to create a commerce module.
The module consists of product part and product type which has product part.
During enable module, it will create admin and home menu for this module, "Commerce" and "Shop" respectively.
My questions are
How do I make this module to be home page during enable module. In other word, I want Index method of
the module's HomeController handle home url?
How do I get Shop menu in front end to be after home menu or register this module to home menu?
I am attaching source code, please download it from the following link
download source code
To take over the home page the standard Orchard way is to implement IHomePageProvider.
You can, when creating a page as part of migrations.cs in a module, tell the Autoroute part to set your created page's alias as the homepage:
//create a page page
var homepage = _contentManager.Create("Page");
homepage.As<TitlePart>().Title = "My Home";
_contentManager.Publish(homepage);
var homePageArp = homepage.As<AutoroutePart>();
homePageArp.DisplayAlias = String.Empty;
_autorouteService.PublishAlias(homePageArp);
This assumes you're going from a clean instance of Orchard without any prior homepages; if you have an existing homepage, you'll have to regenerate those pages' Aliases as part of your module too. This is how it's done as part of the AutoroutePartHandler in the Orchard.Autoroute project (inside the Publish Alias method):
// regenerate the alias for the previous home page
var currentHomePages = _orchardServices.ContentManager.Query<AutoroutePart, AutoroutePartRecord>().Where(x => x.DisplayAlias == "").List();
foreach (var current in currentHomePages) {
if (current != null) {
current.CustomPattern = String.Empty; // force the regeneration
current.DisplayAlias = _autorouteService.Value.GenerateAlias(current);
}
_autorouteService.Value.PublishAlias(current);
}
_autorouteService.Value.PublishAlias(part);
If you dig through the driver and handler for the autoroute project, you'll learn a lot about the internals; when you tick that "set as homepage" box in the Admin UI, it sets the Path to "/" and then that gets picked up, triggers the old homepage re-wire, clears the "/" path to String.Empty and then publishes that blank alias, giving you a new homepage.
(this is valid as of Orchard 1.6)
If your module is to be used by others, then it is better to make a widget which can be added to any layer (the homepage layer for example). That way each user can decide where your module comes into play.
If you are using this module for yourself only, then you can just override the default routes (standard mvc functionallity).
Look at my ExtendedRegistration module (Routes.cs) to see how it's done.
Here I am overriding the standard Account/Register URL. There should be nothing preventing you from overriding the default HomeController.
public class Routes : IRouteProvider
{
public void GetRoutes(ICollection<RouteDescriptor> routes)
{
foreach (var routeDescriptor in GetRoutes())
{
routes.Add(routeDescriptor);
}
}
public IEnumerable<RouteDescriptor> GetRoutes()
{
return new[] {
new RouteDescriptor {
Priority = 19,
Route = new Route(
"Users/Account/Register",
new RouteValueDictionary {
{"area", "itWORKS.ExtendedRegistration"},
{"controller", "Account"},
{"action", "Register"}
},
new RouteValueDictionary(),
new RouteValueDictionary {
{"area", "itWORKS.ExtendedRegistration"}
},
new MvcRouteHandler())
}
};
}
}