I have a django model which stores created and updated date on my front end i have a header called Date in my vue headers i am displaying the created date but i need to display the updated date under the same header when an object is updated. i have same date called row.updated_date_formatted if this is none i need to display created_date else i need to display updated date
<template slot="row" slot-scope="{ row, index }">
<td v-text="row.created_date_formatted"> </td>
</template>
You can code your logic right in v-text parameter value with Vue.
Something like this:
<td v-text="row.updated_date_formatted != null ? row.updated_date_formatted : row.created_date_formatted"></td>
Or the same with Mustache syntax:
<td>{{row.updated_date_formatted != null ? row.updated_date_formatted : row.created_date_formatted}}</td>
v-if v-else is not really necessary in this case.
Related
Using django-tables2 is very easy from your model to get a table. In my case I need one of my table columns to be formated based on its value.
In my current html table it would look like below:
{% if record.status|stringformat:"s" == "New" %}
<td class="bg-success></td>
If the value is New the cell background should be green.
From what I could find there are maybe 3 ways to do something like this:
Updated solutions:
1.Create a class and a css rule with the appropriate background color and add it to the column:
class MyTable(tables.Table):
status = tables.Column(attrs={"class": lambda record: record.status})
.New {
background-color: green
}
This way it works, although I think that record.status could work, without the lambda.
2.You can specify how to render a column:
class MyTable(tables.Table):
status = tables.Column()
def render_status(self, value):
if value.name == "New":
change class accordingly
The change class accordingly part eludes me.
Also you can create a custom column:
class StatusColumn(tables.Column):
def render(self, value):
if value == "New":
return format_html('<span class="text-success">{}</span>', value)
I made this work using a span tag to pass a bootstrap class to format the cell.
3.Use a TemplateColumn and pass html:
class MyTable(tables.Table):
status = tables.TemplateColumn("""
{% if record.status|stringformat:"s" == "New" %}
<td class="bg-success"></th>
{% else %}
<td class="bg-danger"></th>
{% endif %}
""")
This way a new column is created formated correctly.
I am still searching how to do this and I would appreciate any help.
Depending on what your exact needs are, there are different solutions.
1. Changing the appearance of the cell (<td></td>)
If you want to add attributes to the <td> tag, you must use something django-tables2 calls column attributes.
It supports fixed values, but also allows a callable to use some value of the record being rendered.
Say for instance, you have a record containing a field color and you want to use that color as the background color for the cell.
class Table(tables.Table):
person = tables.Column(attrs={
'td': {
'class': 'person-column',
'style': lambda record: 'background-color: {}'.format(record.color)
}
})
Or more specifically for your example:
class MyTable(tables.Table):
status = tables.Column(attrs={'td': {'class': lambda value: 'bg-success' if value == 'New' else 'bg-danger' }})
or without lambda:
def status_attr(record):
return 'bg-success' if value == 'New' else 'bg-danger'
class MyTable(tables.Table):
status = tables.Column(attrs={'td': {'class': status_attr}})
2. changing the contents of the cell
By contents I mean everything within the <td></td> tag. The API of django-tables2 allows for various ways to change the contents of a cell, which is called custom data in the documentation.
Your solutions 2 and 3 already show the ways to do that, however, you can not change the cell attributes in those ways. You might be able to achieve output looking like this <td><td class="bg-success">...</td></td>, which might look like what you want, but are not valid HTML.
I think this should be simple. I have a folderish TTW dexterity content item (a drop box) that contains folderish TTW dexterity items (proposals). Each proposal contains TTW dexterity reviews that have fields I want to summarize.
I can easily make a view that generates a table as indicated below for any proposal with simple modifications to the folderlisting view:
[review1 link] [criterion_1 value] [criterion-2 value]...
[review2 link] [criterion_1 value] [criterion-2 value]...
.
.
I can also generate a working table view for a drop box by modifying the folderlisting view:
[proposal1 link] [column I would like to insert the above table in for this proposal]
[proposal2 link] [column I would like to insert the above table in for this proposal]
.
.
My problem is I cannot figure out how to insert the first table into the cells in the second column of the second table. I've tried two things:
Within the view template for the dropbox listing, I tried duplicating the repeat macro of the listingmacro, giving it and all its variables new names to have it iterate on each proposal. This easily accesses all of the Dublin core schemata for each review, but I cannot get access to the dexterity fields. Everything I have tried (things that work when generating the first table) yield LocationError and AttributeError warnings. Somehow when I go down one level I lose some of the information necessary for the view template to find everything. Any suggestions?
I've also tried accessing the listing macro for the proposal, with calls like <metal use-macro="item/first_table_template_name/listing"/>. Is this even partially the right approach? It gives no errors, but also does not insert anything into my page.
Thanks.
This solution is loosely based on the examples provided by kuel: https://github.com/plone/Products.CMFPlone/blob/854be6e30d1905a7bb0f20c66fbc1ba1f628eb1b/Products/CMFPlone/skins/plone_content/folder_full_view.pt and https://github.com/plone/Products.CMFPlone/blob/b94584e2b1231c44aa34dc2beb1ed9b0c9b9e5da/Products/CMFPlone/skins/plone_content/folder_full_view_item.pt. --Thank you.
The way I found easiest to create and debug this was:
Create a minimalist template from the plone standard template folder_listing.pt which makes just the table of summarized review data for a single proposal. The template is just for a table, no header info or any other slots. This is a stripped version, but there is nothing above the first statement. A key statement that allowed access to the fields were of the form:
python: item.getObject().restrictedTraverse('criterion_1')
The table template:
<table class="review_summary listing">
<tbody><tr class="column_labels"><th>Review</th><th>Scholarly Merit</th><th>Benefits to Student</th><th>Clarity</th><th>Sum</th></tr>
<metal:listingmacro define-macro="listing">
<tal:foldercontents define="contentFilter contentFilter|request/contentFilter|nothing;
contentFilter python:contentFilter and dict(contentFilter) or {};
I kept all the standard definitions from the original template.
I have just removed them for brevity.
plone_view context/##plone;">
The following tal:sum is where I did some math on my data. If you are
not manipulating the data this would not be needed. Note that I am only
looking at the first character of the choice field.
<tal:sum define="c1_list python:[int(temp.getObject().restrictedTraverse('criterion_1')[0])
for temp in batch if temp.portal_type=='ug_small_grants_review'];
c1_length python: test(len(c1_list)<1,-1,len(c1_list));
c2_list python:[int(temp.getObject().restrictedTraverse('criterion_2')[0])
for temp in batch if temp.portal_type=='ug_small_grants_review'];
c2_length python: test(len(c2_list)<1,-1,len(c2_list));
c1_avg python: round(float(sum(c1_list))/c1_length,2);
c2_avg python: round(float(sum(c2_list))/c2_length,2);
avg_sum python: c1_avg+c2_avg;
">
<tal:listing condition="batch">
<dl metal:define-slot="entries">
<tal:entry tal:repeat="item batch" metal:define-macro="entries">
<tal:block tal:define="item_url item/getURL|item/absolute_url;
item_id item/getId|item/id;
Again, this is the standard define from the folder_listing.pt
but I've left out most of it to save space here.
item_samedate python: (item_end - item_start < 1) if item_type == 'Event' else False;">
<metal:block define-slot="entry"
The following condition is key if you can have things
other than reviews within a proposal. Make sure the
item_type is proper for your review/item.
tal:condition="python: item_type=='ug_small_grants_review'">
<tr class="review_entry"><td class="entry_info">
<dt metal:define-macro="listitem"
tal:attributes="class python:test(item_type == 'Event', 'vevent', '')">
I kept all the standard stuff from folder_listing.pt here.
</dt>
<dd tal:condition="item_description">
</dd>
</td>
The following tal:comp block is used to calculate values
across the rows because we do not know the index of the
item the way the batch is iterated.
<tal:comp define = "crit_1 python: item.getObject().restrictedTraverse('criterion_1')[0];
crit_2 python: item.getObject().restrictedTraverse('criterion_2')[0];
">
<td tal:content="structure crit_1"># here</td>
<td tal:content="structure crit_2"># here</td>
<td tal:content="structure python: int(crit_1)+int(crit_2)"># here</td>
</tal:comp>
</tr>
</metal:block>
</tal:block>
</tal:entry>
</dl>
<tr>
<th>Average</th>
<td tal:content="structure c1_avg"># here</td>
<td tal:content="structure c2_avg"># here</td>
<td tal:content="structure avg_sum"># here</td>
</tr>
</tal:listing>
</tal:sum>
<metal:empty metal:define-slot="no_items_in_listing">
<p class="discreet"
tal:condition="not: folderContents"
i18n:translate="description_no_items_in_folder">
There are currently no items in this folder.
</p>
</metal:empty>
</tal:foldercontents>
</metal:listingmacro>
</tbody></table>
Create another listing template that calls this one to fill the appropriate table cell. Again, I used a modification of the folder_listing.pt. Basically within the repeat block I put the following statement in the second column of the table:
This belongs right after the </dd> tag ending the normal item listing.
</td> <td class="review_summary">
<div tal:replace="structure python:item.getObject().ug_small_grant_review_summary_table()" />
</td>
Note that "ug_small_grant_review_summary_table" is the name I gave to the template shown in more detail above.
I have a many to many relationship between forms and events, in a list using a join table and when I display the data in edit mode I show each item in its own dropdown in a table as opposed to one multi select dropdown list. I also have a little jQuery in there to add extra dropdowns in if I want to add more items, My question is, how do I then save back this set of "events", in order? Code is as follows: -
Initial _form.gsp to load all linked events for the form: -
<table id="eventList">
<g:each in="${formInstance?.events}" status = "i" var="item">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
<td>
<label></label>
<g:select name="event_${i}" from="${framework.Event.list()}" required="required" optionKey="id" value="${item.id}" />
</td>
</tr>
</g:each>
</table>
Additional objects are added with this gsp
<tr class="${((newRow+1) % 2) == 0 ? 'even' : 'odd'}">
<td>
<label></label>
<g:select name="event_${newRow-1}" from="${framework.Event.list()}" required="required" optionKey="id" />
</td>
</tr>
The save button currently is as such: -
<g:actionSubmit class="save" action="update" value="${message(code: 'default.button.update.label', default: 'Update')}" />
And the Update action is unchanged from the one generated automatically from the domain setup. How do I get the save to recognise the new fields added? Currently hitting save does to the "events", even if I change the order...
Domain Classes are as such
import java.util.List;
class Form {
static constraints = {
formDesc(blank:false,maxSize:100,unique: true)
}
static mapping = {
table "form"
version false
columns{
id column:"form_id"
formDesc column:"description"
testscenarios joinTable:[name:"lnk_scenario_form",key:'form_id']
events joinTable:[name:"lnk_form_event",key:'form_id']
}
}
String formDesc
List events
static hasMany = [testscenarios:TestScenario, events:Event]
static belongsTo = fartframework.TestScenario
String toString (){
"${formDesc}"
}
}
And
class Event {
static constraints = {
eventTypeID()
eventOrder()
objectID()
testDataID()
}
static mapping = {
table "event_form"
version false
columns{
id column:"event_form_id"
eventTypeID column:"event_id"
eventOrder column:"event_order"
testDataID column:"test_data_id"
objectID column:"object_id"
forms joinTable:[name:"lnk_form_event", key:'event_id']
}
}
EventType eventTypeID
Integer eventOrder
TestData testDataID
Object objectID
static hasMany = [forms:Form]
static belongsTo = fartframework.Form
String toString (){
"${eventTypeID}"
}
}
Turns out this was because my link table had a primary key set on both the form_id AND event_id combination columns, which I don't care about as I WANT to be able to have duplicates in there (as its the order that's more important), removing these primary key values on the table solved the problem!
I do still have the issue that if I now add/remove a bunch of times I get problems with identical names and the issues that represents, but I can work round that one with some jquery hacking (I hope)...
In APEX 3.2, I want to be able to run JavaScript validations to check the data entered and display the appropriate message above each row in the tabular form.
I'm not sure how this would work given that it is a tabular form and the user will be able to add/delete rows.
Appreciate any ideas or suggestions.
Thanks.
Okay, doing some javascript validations on tabular forms is a bit complex, and you need to know what you're doing.
First off, you will need to know the ids or names of the elements you wish to check. As you may know, elements in tabular forms are stored in arrays in apex on submit, and are accessed through apex_application.g_f01/g_f02/...
This is reflected in the html code, and the generated elements also have the attribute 'name' set to the column they belong to. The id also holds the column, plus the rowindex. Warning though, this id is only generated like this when the item is created 'implicitly', ie you did not write your query with apex_item calls (apex_item.textbox(...)).
Another but is that only fields of which the state is saved will have an array column defined. An item which you'd only show as 'display only', will not be generated with an input tag, and will just be held as text in a td tag.
All by all, when you know that, the next steps should be straightforward enough. Take a look at the page source, and take a note of the elements you wish to target. For example, i went for the job field.
<tr class="highlight-row">
<td headers="CHECK$01" class="data"><label for="f01_0003" class="hideMeButHearMe">Select Row</label><input type="checkbox" name="f01" value="3" class="row-selector" id="f01_0003" /></td>
<td headers="EMPNO_DISPLAY" class="data">7782</td>
<td headers="ENAME" class="data"><label for="f03_0003" class="hideMeButHearMe">Ename</label><input type="text" name="f03" size="12" maxlength="2000" value="CLARK" id="f03_0003" /></td>
<td headers="JOB" class="data"><label for="f04_0003" class="hideMeButHearMe">Job</label><input type="text" name="f04" size="12" maxlength="2000" value="MANAGER" id="f04_0003" /></td>
<td headers="HIREDATE" class="data"><label for="f05_0003" class="hideMeButHearMe">Hiredate</label><span style="white-space: nowrap;"><input type="text" id="f05_0003" name="f05" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off"></span></td>
<td headers="SAL" class="data">
<label for="f06_0003" class="hideMeButHearMe">Sal</label><input type="text" name="f06" size="16" maxlength="2000" value="2450" id="f06_0003" />
<input type="hidden" name="f02" value="7782" id="f02_0003" />
<input type="hidden" id="fcs_0003" name="fcs" value="19BD045E01D6BA148B4DEF9DDC8B21B7">
<input type="hidden" id="frowid_0003" name="frowid" value="AAuDjIABFAAAACTAAC" />
<input type="hidden" id="fcud_0003" name="fcud" value="U" />
</td>
</tr>
In the javascript section of the page i then added the following 2 functions.
validate_job does the validation of just one field, the element elJob. The validation i used is just very basic, it's up to you to determine just how complex you want it.
If you want to reference other fields in the same row here, you can do several things: extract the rowindex from the id, if you have it. If it doesn't hold the it, get the parent TR, and then use .children("input[name='f##'") to get an input element in the same row. Or if you need the value of an item which does not save state at all, you'll need to get the TR element, and then find the TD which contains the element you need through the headers attribute, which holds the column name.
function validate_job(elJob){
var sJob = $v(elJob).toUpperCase();
$(elJob).val(sJob);
//do your validations for the field job here
if(sJob=="MANAGER"){
$(elJob).css({"border-color":"red"});
alert("invalid value!");
//depends what you want to do now:
//keep the focus on this element? Set a flag an error occured? Store the error?
return false;
} else {
$(elJob).css({"border-color":""});
alert("value ok");
};
};
Call bind_validations onload. If you allow rows to be created, bind a click event to the addrow button and call bind_validations.
function bind_validations(){
//f01 : row selector
//f03 : ename
//f04 : job
//f05 : hiredate
//f06 : sal
//each input element with attribute name with value f04
//blur event is when the user leaves the field, fe tab out, or even click apply changes
//much like how when-validate-item behaved in forms
$("input[name='f04']").blur(function(){validate_job(this);});
};
Just a proper warning though. I've used javascript validations in some apps so far, but i knew they were only going to be used by a small number of people, and then only internally. It was only one field, with some validations. I made the cursor refocus on the field when the validation failed, so they couldn't jump to the next record and change that aswell. Either a valid value was given, or they reloaded the page or canceled the action. Set up like this, they can't press apply changes either, as the blur event would also fire, validating the field.
When your audience is larger, it gets a bit more iffy: what i javascript is disabled? What if they find some way around? Wizzkids?
I still like the immediate feedback it gives, but in a more critical environment i'd also use the server-side validations. To do this, you need a validation of the type "function returning error text". Check out this page for an example, or this one for some usefull tips (at least for pre 4.0!). Also: apex 4.1 really improves a lot on tabular form validations! ;)
Following on from an earlier question, I'm having problems using an Editor template for datetime fields, below is the code for the editor template (called "EditDateTime").
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%= Html.TextBox("", (Model.HasValue ? Model.Value.Date.ToString("dd/MMM/yyyy") :
DateTime.Today.ToString("dd/MMM/yyyy")), new { #class = "date" })%>
Here is the call to use the editor template,
<%=Html.EditorFor(Model => Model.StartDate, "EditDateTime") %>
All works ok, except the formatting is ignored. The Asp.Net MVC2 Framework book documents templates and specifically states
We’re passing an empty string for the name
parameter because the framework will automatically prefix this with the field name corresponding to the model item being rendered;
So I shouldnt need an id, so why is the formatting being ignored? HOWEVER - if I include an ID, the formatting is adhered to, BUT the model binding is then broken.
Help?
Just to clarify..
If I give the HMTL.Textbox an ID I get the following... The date format is correct but I lose the model binding as the ID is changed from "StartDate" to "StartDate_xx"
<input class="date" id="StartDate_xx" name="StartDate.xx" type="text" value="02/May/2012" />
And without the Id, it looks like this... model binding is correct but format is not.
<input class="date" id="StartDate" name="StartDate" type="text" value="05/02/2012 00:00:00" />
try using
Model.Value.ToString("dd/MM/yyyy")
works for me.
everything looks fine really... is the item you are sending a Datetime or a Datetime?