How to IMPLEMENT a widget ?

62 Posts

persepolis Reply #1, 20 years, 3 months ago

I refer to the latest post to this subject which is not fairly new
http://modxcms.com/forums/index.php/topic,3276.0.html

The question still remains - how to IMPLEMENT a widget ?
How to assign all the values described in http://modxcms.com/datagrid-widget.html ?

A simple example in the documentation would be really helpful.

MODX Staff
1,535 Posts

Garry Nutting Reply #2, 20 years, 3 months ago

Hi persepolis,

A simple example is to consider the scenario of returning the page titles from the latest 10 items in the site_content table:

1. Create a new TV, keep the type as ’Text’. (give it name, caption, description as required)
2. In the default value, add in your @SELECT binding that will select the records from the database. In the example (assuming the table prefix is modx_), this is:

@SELECT pagetitle FROM modx_site_content ORDER BY id DESC LIMIT 10

3. Set the Output Type to ’Data Grid’.
4. In the Widget Properties, set the following properties:

Column Names = Page Title
Field Names = pagetitle

Leave the rest as the defaults (for the purpose of this example)

5. Assign the TV to the required templates.
6. Save the TV.
7. In your page, insert the TV where you want the Data Grid to be displayed.

Does that help? You can do a lot more with the Data Grids but it depends on your application. For more advanced uses, you could always create a snippet and then use the Data Grid API to generate the output.

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com

62 Posts

persepolis Reply #3, 20 years, 3 months ago

Yes that helps - I did not saw the output option and wondered - now I will try it

264 Posts

qlworx Reply #4, 20 years, 3 months ago

Quote from: garryn at Jul 07, 2006, 08:49 PM

A simple example ...

Nice explanation, thank you.

86 Posts

lovingmodx Reply #5, 20 years, 2 months ago

Nice Explanation! Suggestion: Include it into the documentation as an example!

I have a question:

Can I use widget (for example the datagrid widget) without setting up a new template variable but just merely typing text? For example [[datagrid? &value="@SELECT pagetitle FROM modx_site_content ORDER BY id DESC LIMIT 10" &columnName=’Page Title’ &fieldName=’pagetitle’]] ?

MODX Staff
1,535 Posts

Garry Nutting Reply #6, 20 years, 2 months ago

Hi lovingmodx,

This is a very quick example of how to use the datagrid in snippet form, it’s a bit rough around the edges but serves as a good example. You would need to add some more validation of the inputs before using this on a production site (you’ve been warned

)

As you’ll see from the code, I’ve wrapped the datagrid output in a form (just so I can illustrate how you can use the ’template’ function in the $grd->colTypes() to define custom fields you may want to add to the grid.)

The snippet code is:

/**
* Datagrid Snippet (example)
* Author: Garry Nutting
*
*/

//-- check the inputs
$sql = (isset($sql)) ? $sql : false;
$columnName = (isset($columnName)) ? $columnName : false;
$fieldName = (isset($fieldName)) ? $fieldName : false;

//-- exit if not enough information to continue
if (!$sql || !$columnName || !$fieldName) {
    return '';
}


//-- include datagrid class
$basePath = $modx->getConfig('base_path');
include_once $basePath.'manager/includes/controls/datagrid.class.php';

//-- run the query
$dataSQL = $modx->db->query($sql);

//-- render list of templates
$grd = new DataGrid('', $dataSQL);
// set page size to 0 to show all items 
$grd->noRecordMsg = 'No Pages Found';
$grd->cssClass = "grid";
$grd->columnHeaderClass = "gridHeader";
$grd->itemClass = "gridItem";
$grd->altItemClass = "gridAltItem";
$grd->columns = ' ,'.$columnName;
$grd->colTypes = "template:<input type='radio' name='pid' value='[+id+]' />";
$grd->colWidths = "10%,90%";
$grd->fields = "template,$fieldName";

//-- wrap the rendered grid
$output .= '<form name="datagrid" method="post" action="[~[*id*]~]">';
$output .= $grd->render();
$output .= '<input type="submit" name="submit" value="Submit" />';
$output .= '</form>';

return $output;

And the snippet call is:

[!datagrid? &sql=`SELECT id,pagetitle FROM modx_site_content ORDER BY id DESC LIMIT 10` &columnName=`Page Title` &fieldName=`pagetitle`!]

Hope that gives you a starting point,
Garry

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com

86 Posts

lovingmodx Reply #7, 20 years, 2 months ago

Woohaa! This is exactly what I am talking about! You are incredible!

Take 1 minute to install on my site and load up to a page. Works perfectly.

I have been playing with joomla for months but still couldn’t grasp the idea of them (too complicated) and I even have difficuties figuring out how to include my own script.

The reason I like MODx is that snippet is so cool and powerful! I can start using it after playing it for 2 days.

MODx rocks, thanks to the coders and the documentation team! Nice work.

MODx will be the future of CMS!