I want to create a page detail of product containing the following information such as name, ID, type, status, quantity, description etc by AEM 6.1. But it seems difficult to me.
Assuming there is a table of product list. Once clicking the Read One link in a row, the detail page of the item will absolutely be rendered.
Do you have any ideas ?
I think this really depends on how your product details (ID, type, status, quantity, description, etc) are stored.
A good solution would be to create a new page component that reads an ID http parameter passed when clicking on the READ ONE button as an argument into the rendering of the new (PRODUCT DETAIL) page.
so the all the buttons would look like this: www.mywebsite/products/productdetails?ID=x where x is the ID of the product in the given row when clicked.
Your new page component would have to have a code snippet similar to this:
<div id="product-detail-component" data-sly-use.product="com.mypackage.models.ProductModel">
<ul>
<li>${product.ID} </li>
<li>${product.description}</li>
</ul>
</div>
And then you would need a new Sling Model class that can handle a http parameter
#Model({adaptables= Resource.class,SlingHttpServletRequest.class}) public class Product Model {
#PostConstruct
public void init()
{
/*
1.retrieve HTTP parameter which is ID
2.access resourceResolver/resource to locate node containing product properties relative to resource location
*/
}
}
This is a very basic and not functional example, but I think it may give you a better direction.
Related
Background
I am trying to make a dynamic navigation component in AEM. Currently I have been trying to find information in the docs and online to help me but have not been able to find much.
My application loads vue components into AEM so the front end is controlled by VUE and the data is passed in through props.
I would like to pass the pages and sub pages of those pages into the vue component, so I can create a dynamic navigation with a drop down nav for any links.
Example
Currently I found a way to use a java class to load the root pages links. I am doing that like this,
package services.agro.something.core.models;
import java.util.*;
import java.util.Iterator;
import com.day.cq.wcm.api.Page;
import com.day.cq.wcm.api.PageFilter;
import com.adobe.cq.sightly.WCMUsePojo;
public class SidebarNavigationModel extends WCMUsePojo{
private List<Page> items = new ArrayList<Page>();
private Page rootPage;
// Initializes the navigation
#Override
public void activate() throws Exception {
rootPage = getCurrentPage().getAbsoluteParent(2);
if (rootPage == null) {
rootPage = getCurrentPage();
}
Iterator<Page> childPages = rootPage.listChildren(new PageFilter(getRequest()));
while (childPages.hasNext()) {
items.add(childPages.next());
}
}
// Returns the navigation items
public List<Page> getItems() {
return items;
}
// Returns the navigation root
public Page getRoot() {
return rootPage;
}
}
Then I could use this data like this,
<div data-sly-use.sidebarNavigationModel="services.agro.gde.core.models.SidebarNavigationModel" class="sidebar-navigation ae-spacing-indent">
<div class="sidebar-nav-container">
// This is a vue component that I am trying to pass data to. The data comes through as commas and when I expect an array an error throws in console stating it expects array but receives a string.
<sidebar-navigation title="${properties.title}" items="${sidebarNavigationModel.items}"></sidebar-navigation>
</div>
// This outputs 16 commas to the screen ${sidebarNavigationModel.items}
<ul class="nav navbar-nav navbar-center">
// This outputs a link to home
<li>HOME</li>
// This outputs 19 links like I expect
<li class="nav navbar-nav navbar-left" data-sly-repeat="${sidebarNavigationModel.items}">
${item.title}
</li>
</ul>
</div>
Question
If I could better understand the data set that is returned in the loop I believe I could pass it to the vue component as I have tried.
Why does this output commas when outside of the loop and why when passing it to vue does it appears to be a string?
How can I get the sub pages for a site when it loads into a data set I can pass to my vue component from the template?
HTL/Sightly is trying to render the array but for each item it will render nothing (since it cannot evaluate and render the Page object). What you could do is either massage the data in your Use-Object to return exactly the needed string or process it in the script like:
[<sly data-sly-repeat="${logic.items}">{title="${item.title}",path="${sidebarNavigationModel.path}"}${itemList.last?'':','}</sly>]
The vue component is printing commas because the list returned by java class is a list of com.day.cq.wcm.api.Page objects and not a list of String. Sightly understands that it is a Page object and hence able to invoke page methods on it to retrieve path and title.
Getting a list of subpages - There are different ways you can do this. Depends a lot on your content structure and your requirement - what you consider are child and parent pages.
You can set an attribute in page properties for all the parents pages and use this attribute to identify a parent page and then construct a map of parent - child pages.
Or if your content structure runs more than a level deep and you need child pages from deep down the heirarchy, you can recursively fetch all the child pages and format into a data structure your vue component understands.
Or you could use Page API's like hasChild(), listChildren(), etc to drive your logic of constructing parent-child nav structure.
All this can be achieved from your java class.
I have 2 tables in database Industry and Category. They are joined using IndustryId as primary key and Foreign key in tables.Now I want to show Industry as my main menu item and Related categories as my sub menu items of respective industries. I am using asp net mvc enity framework as my coding architecture with visual studio 2017.This is my first application on this architecture I want a brief explanation including models views and controllers step by step.I have done this binding earlier on asp net web forms without mvc. But entity frameworks is seems to be totally different from previous versions.
Edit based on user comment, he want to bind the data on load, making nested list, I will leave my old answer as it might help someone else, I will add the new answer as well,
my suggestion is you pass List of Industries as a ViewBag, since there is foriegn key in categories which is industryid relating to industry table, ef will detect that relationship and represent it in your Industry Model as virtual Collection<Category> Categories, this represents all categories associated with this industry.
what you can do is pass it then using razor syntax do something like this in your view
in your controller you pass it as viewbag
ViewBag.Industries = dbContext.Industries.Include(x => x.Categories).ToList();
then in your view
<!-- init your list -->
<ul>
<!-- loop through your viewbag -->
foreach (var x in (List<Industry>) ViewBag.Industries)
{
<li> x.IndustryName
<!-- init your sub menu -->
<ul>
<!-- loop through your categories of this industry x -->
foreach(var c in x.Categories)
{
<li> c.CategoryName </li>
}
</ul>
</li>
}
<!-- loop end, close your list -->
</ul>
For People looking to update their menu content dynamically according to another menu value, read below:
What I do to solve such thing is, first create action which accepts industry id and return List or categories, I use ajax to call this action whenever my industry id list change in the front end (change event listener), then get the return as list of object, bind the data to my sub menu using jquery.
something like
public ActionResult GetCategories(int IndustryID)
{
// this simple select query, retrieves all categories that have industry id provided
var categories = dbContext.Categories.Where(c => c.IndustryId == IndustryID).ToList();
return Json(categories);
}
ajax code
// industryId is the id of industry in your view, apply change event listener
$('#industryId').change(function () {
// ajax call, get data
$.ajax({
type: "POST",
url: '#Url.Action("GetCategories", "controllerhere")',
data: { IndustryID: this.value},
dataType: "json"
}).done(function(data){
// Data recieved, get categories list, empty it, bind the new data
var ddl = $("#categoriesList");
ddl.empty();
ddl.append($('<option>', {value: 0,text: 'Select'})); //Newly added
// categoryID and CategoryName are properties in your category, these Names I assumed, they might change depending on your Model
$.each(data, function () {
ddl.append($('<option></option>').attr("value", this.CategoryID).text(this.CategoryName));
});
});
});
I hope this answered your question, I am not sure what did you mean when you said entity framework is different, you can ask me more specific questions maybe i can help
How do I show a list of items created using a SmartForm in Ektron Version: 9.00 SP3(Build 9.0.0.249)?
I created a SmartForm where users can put in details of job positions available. Now I want to display those positions in a list i.e. jobs available. Then when they click on a link it takes them to the details of that job.
I have zero experience with Ektron so I hope this isn't a silly question and I need stuff broken down to pretty basic levels.
EDIT: You can find this and more in-depth information on using strongly typed objects with Ektron Smart Forms at Thomas Higginbotham's blog.
POST:
The example I'm creating below is for output of images in a list, as though I were going to make a gallery. Keep in mind that there are other things I would do when actually creating a gallery, so this is by no means completed code in that regard. It is, however, a very good and simple illustration for how to retrieve and handle content from Ektron in the most .NET way possible (without a lot more separation of concerns).
First, I have some recommended reading for you. Ken McAndrew (long-time Ektron dev and now Sitecore dev) put together a nice set of posts about a class you can use to obtain Ektron's Smart Form content as .NET objects, making them much easier to work with. I recommend using Ken's version of the class (link within the blog post).
There's also a hangout featuring Bill Cava, original author of the method, Ken, and myself talking about this approach, which might help.
I looked and I think the original webinar has been taken down.
Regardless, once you have the Content Types code in place, it's relatively simple. You want to:
Create .NET models for your Smart Forms
Get the items
Map them to a ViewModel (optional)
Databind them to a ListView or Repeater control
Creating .NET Models for Smart Forms
To start this, I've created a rather simple Smart Form for a Press Photo. It contains three fields:
Name
Description (Caption)
Image (stored as a URL string for simplicity, not as an <img /> tag)
Next, click the "XSD" button in the SmartForm Data Design View (where you add/manage the fields) and copy all the XSD code. (You'll see the XSD button in the screenshot below, immediately above the modal.)
Save that to a file. I created a folder at C:\ContentTypes and added the file as PressPhoto.xsd there.
You'll want to run a file called XSD.exe (provided and documented by Microsoft as part of most Visual Studio installations). This will use the XSD and generate a C# class file for you - one that's friendly for deserializing the Smart Form XML into a .NET object.
Here's where to find it (as included with Visual Studio 2015):
However, running it from the command line is something I find painful since I always forget the rather lengthy path for it. So I created a Batch file to do most of the dirty work for me. I wrote it to accept three parameters, in order:
The path to the XSD file
The output path where I'd like to store the generated class file
The namespace I want for the generated class (tip: I always set the Namespace to include the name of the Smart Form - this prevents conflicts if you're generating classes for multiple Smart Forms)
Here's the code and a screenshot of the command to execute it.
#ECHO OFF
SET xsdExePath="C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.6.1 Tools\xsd.exe"
SET xsdFilePath="%~f1"
SET outFolderPath="%~f2"
SET ns=%3
%xsdExePath% /c %xsdFilePath% /o:%outFilePath% /l:CS /n:%ns%
This generates a file named PressPhoto.cs within my C:\ContentTypes\ directory.
Going into my Ektron project, I'm going to add Ken's SmartForm class (referenced in his blog above) and my new PressPhoto class within a directory in my App_Code folder. Like so (folder structure beneath App_Code/CSCode is up to you, but keep it organized for your own sanity):
Add a class for each Smart Form you want to pull via API (for me, that's all Smart Forms).
I know this is seemingly a lot of prep, and compared to some other, more modern systems, it is. But this will help you immensely once you're in the habit.
Get the Items (and Map to a ViewModel)
Now that you've basically created your own APIs for getting the items (the alternative is XML Transforms, btw), you're ready to use them.
I prefer to create my own "Manager" class as well as ViewModel. If you'd prefer a different approach, then this will at least give you the sample code to move in your own direction.
I'm putting comments about the code in-line so you can read them in context.
View Model - very basic
namespace MyProject.ViewModels
{
/// <summary>
/// Provides the fields necessary to display a PressPhoto Smart Form to the site.
/// </summary>
public class PressPhotoViewModel
{
public string Title { get; set; }
public string Description { get; set; }
public string ImageUrl { get; set; }
public string ContentUrl { get; set; }
public long ContentId { get; set; }
public PressPhotoViewModel()
{
}
}
}
And the "Manager" class so I put as little code into the code-behinds as possible. A nice, centralized location for all my PressPhoto logic.
using Ektron.Cms;
using Ektron.Cms.Content;
using Ektron.Cms.Common;
using Ektron.Cms.Framework.Custom;
using MyProject.SmartForms.PressPhoto;
using MyProject.ViewModels;
using System.Collections.Generic;
using System.Linq;
namespace MyProject.Managers
{
/// <summary>
/// Provides CRUD operations for managing PressPhoto objects within the CMS.
/// </summary>
public class PressPhotoManager
{
/*
* "root" is the default root element of the Smart Form XML.
*
* If you've changed this, your code will be different. Most people don't,
* so I'm going with the lowest-common-denominator example.
*
* I normally set the "root" to something else, and thus give it a more
* meaningful class name. I also tend to load this manager via something more
* similar to a singleton, but for simplicity's sake...
*/
private SmartFormManager<root> pressPhotoManager = new SmartFormManager<root>();
public PressPhotoManager()
{
// Nothing needs done here for this example.
}
/*
* Usually, I'm not interested in writing information back to the DB, so
* I'm only going to include samples for GetItem and GetList (by folder) here.
*/
/// <summary>
/// Retrieves a PressPhoto item by its Ektron Content ID
/// </summary>
/// <param name="ContentId">Ektron Smart Form Content Id</param>
/// <returns>Press Photo ViewModel for display</returns>
public PressPhotoViewModel GetItem(long ContentId)
{
/*
* Get items - this returns an object that is the amalgamation of the standard
* Ektron ContentData object and the deserialized Smart Form information.
*
* The format is:
* * systemObject.Content = standard ContentData fields
* * systemOjbect.SmartForm = Smart Form fields
*
* For some reason, the returned object in the custom class inherits from ContentData.
* This inheritance is probably not necessary and is also likely confusing. So only try
* to use the fields within the containers listed above.
*/
var systemObject = pressPhotoManager.GetItem(ContentId, false);
if (systemObject == null) return null;
/*
* I often want to map both Smart Form and ContentData fields to my output. This is where
* a ViewModel comes in handy - it normalizes the data to be rendered. So then I'm not
* dealing with object.Content.* and object.SmartForm.* during rendering.
*
* Another note: You might consider putting this mapping into a constructor in
* the ViewModel in order to avoid the repetition you'll find in the GetList method
* below.
*/
return new PressPhotoViewModel()
{
ContentId = systemObject.Content.Id,
ContentUrl = systemObject.Content.Quicklink,
Title = systemObject.SmartForm.Name,
Description = systemObject.SmartForm.Caption,
ImageUrl = systemObject.SmartForm.Photo
};
}
/// <summary>
/// Retrieves a list of PressPhoto by the containing Ektron Folder Id (non-recursive)
/// </summary>
/// <param name="FolderId">Ektron Folder Id</param>
/// <returns>Enumerable of Press Photo ViewModel for display</returns>
public IEnumerable<PressPhotoViewModel> GetList(long FolderId)
{
/*
* There are several "Criteria" objects. This is the simplist, but they also exist
* for retrieving items from a Collection, from Taxonomy, or given a certain
* Metadata property value.
*/
var criteria = new ContentCriteria();
// Filter tells the API which folder to retrieve content from.
criteria.AddFilter(ContentProperty.FolderId, CriteriaFilterOperator.EqualTo, FolderId);
// Don't check sub-folders.
criteria.FolderRecursive = false;
/*
* Retrieve only 12. The default is 50. Get in the habit of setting this so you
* don't grab 50 when you only need one.
*/
criteria.PagingInfo = new PagingInfo(12);
// Only return metadata when you need it, for performance. Default here is false.
criteria.ReturnMetadata = false;
// Ordering FTW! Hopefully self-explanatory.
criteria.OrderByField = ContentProperty.Title;
criteria.OrderByDirection = EkEnumeration.OrderByDirection.Ascending;
// Same as above...
var systemObjectList = pressPhotoManager.GetList(criteria);
if (systemObjectList == null || !systemObjectList.Any()) return null;
return systemObjectList.Select(p => new PressPhotoViewModel()
{
ContentId = p.Content.Id,
ContentUrl = p.Content.Quicklink,
Title = p.SmartForm.Name,
Description = p.SmartForm.Caption,
ImageUrl = p.SmartForm.Photo
});
}
}
}
Databinding to a List Control
For simplicity, I'm going to put this code into a .NET User Control.
Markup:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Gallery.ascx.cs" Inherits="Components_Controls_Gallery" %>
<asp:ListView ID="uxPhotoGallery" runat="server" ItemPlaceholderID="itemPlaceholder">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<%--
I'm mixing up two different ways of referencing the incoming data. One is by casting
the DataItem to the incoming type, which gives you intellisense access to the properties.
The other is more of a dictionary approach in which you have to type out the property name
as a string.
I really like the casting approach, but it's mega-wordy.
--%>
<a href="<%#((MyProject.ViewModels.PressPhotoViewModel)Container.DataItem).ImageUrl %>">
<img src="<%#((MyProject.ViewModels.PressPhotoViewModel)Container.DataItem).ImageUrl %>" alt="<%#Eval("Description") %>" />
<div><%#Eval("Description") %></div>
</a>
</li>
</ItemTemplate>
</asp:ListView>
Code:
using MyProject.Managers;
using System;
using System.Linq;
public partial class Components_Controls_Gallery : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
var pressPhotoManager = new PressPhotoManager();
// Whichever folder Id...
var photos = pressPhotoManager.GetList(75);
if (photos != null && photos.Any())
{
uxPhotoGallery.DataSource = photos;
uxPhotoGallery.DataBind();
}
}
}
And... that should do it. The best way I know how, in any case. There are certainly ways that require less code and prep, but this is by far my preferred as it keeps me working as much as possible with real .NET objects. Though you could use LinqToXML or other techniques, I prefer to not use them as it requires you to develop a lot of your own knowledge of the XML and never reads as well as this, imo.
Happy coding.
I'm using the October CMS and I'm having some trouble with deferred bindings.
I have two tables: products and product_images. I've split up my backend form into two tabs, one for product details and one for the product images:
I have my relationships set up correctly and use the following code (placed in a partial) to render the product images list:
<?= $this->relationRender('product_images'); ?>
The images tab looks like this:
The problem happens when I try to create a new image. When saving the image from the image modal, I get this exception:
I understand why there would be a constraint violation: The main record hasn't been saved yet, so there's no id for the image record to reference. In other words, the product image can't be associated with the product because the product doesn't exist yet.
The OctoberCMS documentation on deferred binding hints at a solution. But the documentation also states,
Deferred bindings are supported in the back-end Form behavior
automatically
Indeed, I haven't explicitly written any back-end form processing code. So even if I wanted to follow the instructions on deferred bindings, I wouldn't know where to put it. Any suggestions?
UPDATE:
In my config_relations.yaml file, I've set deferredBinding to true, but it made no difference:
product_images:
label: Image
deferredBinding: true
My products controller looks like:
class Products extends \Backend\Classes\Controller
{
public $implement = [
'Backend.Behaviors.FormController',
'Backend.Behaviors.ListController',
'Backend.Behaviors.RelationController'
];
public $formConfig = 'config_form.yaml';
public $listConfig = 'config_list.yaml';
public $relationConfig = 'config_relation.yaml';
public function __construct()
{
parent::__construct();
BackendMenu::setContext('MyPlugin.Products', 'products');
}
public function index()
{
$this->makeLists();
$this->makeView('index');
}
I do not have a product_images controller. I'm not sure why. Is that the issue?
My mistake was that I had put constraints on the product_id column in the product_images table:
$table->integer('product_id')->unsigned();
$table->foreign('product_id')->references('id')->on('me_myplugin_products');
Apparently I need to allow that column to be null. Changing it to this worked:
$table->integer('product_id')->nullable();
I want to apply a class-name like "current" to an actionlink (in the master view) when it points to the current URL, in order to indicate an "on-state" in the UI. How might I do this?
UPDATE: I understand how to apply an attribute, I just need to know how to get the actionlink to know that it is pointing to the current page.
I suspect MVC's ViewContext.RouteData.Values["action"] would be useful for this. The RouteData has a range of key/value pairs (such as the Action mentioned here) that allow you to retrieve information about the current page and "view state" (for want of a better description) you're currently working with.
if it is only for visible use, I would use javascript with jQuery to quickly add a class for the 'current' link
$(document).ready(function() {
$('a.mylinks').each(function(i) {
if ($(this).attr('href') == document.URL) {
$(this).addClass('current');
}
});
});
<ul>
<li>link to current page</li>
<li>link to other page</li>
<li>link to another page</li>
</ul>