Version 1.5.0
Tired of using those pre-canned, static Stacks? No clue how to write your own web apps within RapidWeaver? It’s time to rethink what Stacks have been so far and could be: here is StackApps - the stacks collection that moves Stacks to the next level …
StackApps is a completly new set of Stacks that is not just adding static web clips or HTML snippets to your page, but is actually generating dynamic code. Using StackApps you are now able to create dynamic web apps without writing one single line of code in less than 5 minutes.
StackApps assumes a certain app model which is based on the so-called CRUD pattern which stands for Create, Read, Update and Delete. CRUD pattern is the basis of a standard we are all familiar with: the HTTP protocol. Another example is the REST API pattern, which is the most used API standard on the internet these days
Even though those examples are widely used, the most common usage of CRUD is in the area of databases. SQL, the Standard Query Language used in databases like MySQL supports the CRUD paradigm as well: INSERT is the SQL equivalent of the Create, SELECT Reads from the database, UPDATE does the Update and guess what, DELETE helps you to Delete records from the database. Using these basic database operations one can implement various use cases. But do you want to program those operations by hand?
This is where StackApps kicks in. Imagine you want to write a simple database driven app that manages your personal tasks. What do you need to achieve this? Typically you want to display a list of all tasks (Read) and an individual task (Read), a form that allows you to create and modify tasks (Create, Update) and a way to delete unwanted tasks from the list (Delete). StackApps supports all of those tasks by providing a proprietary framework wrapped by easy to use Stacks that can be configured and customized to adjust to a variety of use cases.
So, can you use StackApps to implement app XYZ? Well, if you can map your apps functionality to the CRUD paradigm it is very likely that you can actually use StackApps to implement your specific app. But to be very clear here, StackApps is not the silver bullet that solves all kinds of requirements. But the good news is (and we will see that later) you can actually extend the StackApps framework by your custom written Stacks that can even enhance StackApps beyond what’s being provided out-of-the-box.
Ok, let’s dive a little deeper. I guess it’s fair to assume you know what a relational database is and you have some experience with databases like MySQL, the most commonly used relational database that can be found on the web. A relational database like MySQL consists of tables of records and records are comprised of one or many database fields.
StackApps use the same metaphor to create database-driven apps within RapidWeaver: to display one or many records on a page, you typically take one of the Records Stacks within StackApps. A Records Stack itself contains again one or many Field Stacks which determine what will be displayed within a Record Stack. In our CRUD paradigm, Records & Fields cover the Read part.
Both, Records and Fields have a lot of configuration parameters that allow you to customize and tweak the behavior and look of the web pages that gets generated. In general, Records can be rendered in a table- or list-style layout in case of many records being displayed. If you want to display just one specific record, StackApps provides a Details layout.
Ok, so far we can display individual database records, but how can we actually create, update or delete one of those records? This is where Forms & Inputs kick in. Forms are the StackApps equivalent to HTML forms including input validation and automatic POST handling after pushing the submit button.
StackApps includes a lot of smart form handling logic in order to make your life as easy as possible. That even includes the generation and handling of the forms submit buttons that usually require a lot of coding.
Before you can actually use StackApps Stacks you have to make sure that everything is setup and installed appropriately. If StackApps isn’t installed the correctly, apps are most likely going to break.
There are a couple of mandatory and some optional components you need in order to successfully run and use StackApps on your Mac
As soon as you have all of those packages installed on your development machine, you should download the latest version of StackApps before you start developing your first project. As there is no dedicated installer available, either double-click the StackApps Stack or just copy the StackApps Stacks to the Stacks folder on your Mac.
In case the built-in Stack Installer doesn’t do its job for whatever reason you can always install StackApps manually.
There are a few setting within RapidWeaver you should keep in mind before publishing your project to the dev or production server:
Now that you are ready on the development side, you should check your hosting environment which will ultimately run the apps you have created with StackApps. It is highly recommended that you use the same or later releases of PHP and MySQL on your server compared to what’s installed on your Mac. This avoids any possible incompatibilities between your development and your hosting environment. Nevertheless, there is no guarantee that a web app that has been generated on your Mac is running smoothly on your hosting environment.
Without further ado, let’s step right into StackApps and create our first little project that demonstrates the basic capabilities of the StackApps framework. The project I have choosen for the start is neither too complex nor too simple. But there even more examples available that even show the more advanced features of StackApps. Ok, let’s start …
As our first project I have decided to develop a simple todo list mananger, that has the minimum set of features to create, read, update and delete tasks or CRUD as mentioned before :) My Tasks should have a list view that shows all active tasks or todos, a details view that shows all the task details and finally a task editor that is used to creat a new task, update existing tasks and finally delete unwanted tasks.
In order to get started, let’s setup the database scheme for our little project.
Ok, here is a possible schema that contains all the fields that are needed to create our simple task manager
CREATE TABLE 'mytasks' (
'task_id' int(11) NOT NULL AUTO_INCREMENT, // this is our unique primary key to index our tasks
'task_prio' int(11) NOT NULL, // every task needs a prio, right
'task_desc' varchar(256) NOT NULL, // and a description of course
'task_done' int(11) DEFAULT '0', // we need to track progress after all
PRIMARY KEY ('task_id')
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
Let’s add some content to have something we can look at as we do the entry part in the end.
INSERT INTO 'mytasks' ('task_id', 'task_prio', 'task_desc', 'task_done')
VALUES
(1,3,'Finish website',10),
(2,2,'Finish StackApps',100),
(3,1,'Create StackApps docs',20);
Using Sequel Pro or your preferred DB admin tool, you should be able to setup the database and enter the test content. Now we are all set to actually start using StackApps …
TBD
TBD
TBD
TBD
In the future StackApps will come bundled with a couple of example apps that can be used to learn how to use StackApps and learn about the more sophisticated features of the product. Currently, these examples are not yet available.
MyTasks is a very basic StackApps project to manage simple tasks that contains all the ingredients of a minimal CRUD based app:
Inventory adds a couple of new features to what we’ve learned via the MyTask app:
The CMS project covers the content management capabilities of StackApps. Using various CMS Stacks you can display database content on your site either in the regular content area or in a arbitrary ExtraContent area. The project also includes a content editor that can be linked to the actual content.
This is the most complex app example that creates a basic blog that uses the themes blog styles that are usually bundled with RapidWeaver themes. The blog features:
Imagine you want to create an Edit button in a TableGrid that links to an editor for the specifc record. In order to achieve this, use a standard TextField Stack, set the Static Text to ‘Edit’, don’t enter a Label or Field and create a Static Action Page to point to the editor page. Use the record unique ID as a Action Param for the editor.
In case you want to provide a logout link for your users, create a normal textlink and point it to the login page adding the formAction=logout parameter, i.e. yourdomain.com/login/?formAction=logout
Clicking this link deletes the security context and send the user to the cancel page defined in your login Stack. You can of course combine this with the various button stacks that are available out there.
Imagine a link that either shows Login if you are not yet logged-in or your user name and a Logout link in case you are logged-in. In order to create such a element, use a Script Stack with the following code and Trigger being set to ‘Here’:
// retrieve $setup from global scope
$setup = $GLOBALS['setup'];
if ($setup->isLoggedIn())
{
$link = new HTMLAnchor("Logout", array("href" => $setup->_config["secLogin"] . "?formAction=logout"));
out("Hi, " . $_SESSION["user"] . " | " . $link->toHTML());
}
else
{
$link = new HTMLAnchor("Login", array("href" => $setup->_config["secLogin"]));
out($link->toHTML());
}
Alternatively you can do something similar on the navbar by changing the Login menu depending on the login state.
<?php showLogin("Login", "Hi, %s"); ?>
Add the above code as the Login page name in the RW HUDand you will get a page named Login as long as you are not logged in and Hi, username in case you are logged in. The function takes two strings as input. If you leave them out, StackApps is using “Login/username” as a default.
One of the key feature of StackApps is its security framework that allows you to password protect pages or even smaller fragments of your website. So far it was not possible to actually extend the security to your website navbar, which so far showed menu items even though the user isn’t able to actually open the page due to its access rights.
Since StackApps 1.2.0 this has changed. You can now security enable your navbar by 3 simple modifications/prerequisits:
Those two modifications are relatively easy to accomplish. Let’s start with the template modification.
Just go to the theme selector in RapidWeaver and search for your current theme. Right-click on the theme and either create a dublicate first or directly show the theme content inside the Finder. Either way, as soon as you see the content of the theme package just look for the index.html and open it with your preferred text editor.
Next thing you do is search for the %toolbar% section inside the HTML code. This is where we need to apply our modification. Simply replace %toolbar% with the following code section and don’t change a single piece.
<!-- StackApps Navbar Security Before Toolbar
=============================================
<?php ob_start(); ?>../rw_common/themes/BootSnap/styles.css<?php $path = pathinfo(ob_get_clean()); $path = $path['dirname'];
if (substr($path, 0, 1) != '/' && substr($path, 0, 4) != 'http') {
include_once($path.'/../../plugins/stacks/libs_setup/simple_html_dom.php');
include_once($path.'/../../plugins/stacks/libs_setup/helper.php'); ob_start();?> -->
%toolbar%
<!-- StackApps Navbar Security After Toolbar
============================================
<?php if (version_compare(PHP_VERSION, '5.3.1', '>='))
{checkNavbarSecurity(ob_get_clean());} else {ob_end_flush();}} ?> -->
As this code is wrapped in HTML comments, it doesn’t do anything until your page is PHP enabled, either by adding the StackApps Setup Stack or changing the page extension to .PHP manually.
But even in this case, the menu will not change as long as we do not modify the menu structure itself inside RapidWeaver. Ok then, let’s move to the second modification step. But first make sure you save the file. Another aspect you should be aware of, this feature requires PHP >= 5.3.1 in order to work. There is some code embedded that checks the used PHP version in order to handle older environments, but keep in mind that some of the menus may become visible in case you run on an environment that doesn’t have the required PHP version.
With the modification on the index.html we have all the plumming ready for us to control the visibility of individual menu items or whole menu branches. In order to do that go to RapidWeaver and select a page you want to protect in the navbar. Click on the page name in the page hierarchy and append the following security descriptor to the page name
The security descriptor supports the following security types:
authenticate you have to be authenticated in order to see the item, e.g. <sec type=“authenticate”/>
logout you have to be logged out in order to see the item, e.g. <sec type=“logout”/>
accesslevel you have to have an access level >= the one define here to see the item, e.g. <sec type=“accesslevel” value=“10”/>
roles you have to have one of the roles defined here to see the item, e.g. <sec type=“roles” value=“demo”/>
As the page title automatically goes to the browser title, you will see the security descriptor of the page in the browser title. In order to prevent this, choose a different browser title within RapidWeaver.
Assuming you have done the necessary markup and you have enabled the security framework inside StackApps, you will get a security-enabled navbar after you have done those changes. But please keep in mind that those changes only impact the menu visibility and not the page protection. You can sill open those pages if you know the URL. So make sure you have those pages protected as well using the Security Stack.
Even though this is a very elegant and non-disruptive way of getting this feature to work, the security-enabled navbar is still limited in the way StackApps handles the “remember login” feature. Due to the fact that Stacks can not add code in front of everything (in this case the navbar) we can not detect an already logged in user before the navbar is rendered. This is only the case when accessing the page after a session timeout and the security context need to be established again. This might be solved in the future as soon as Stacks is going to support arbitrary content to go in front of the page.
Using a CMS Stack you can not only draw content on page from the database, you can even render pages completely dynamic without the need of creating a RapidWeaver page for every page you need.
In order to achieve this, create a RapidWeaver page first and call this page ‘showContent’ for instance. Place a CMS Stack on the page and select a dynamic Content ID. The name you specify as a Content ID is now the URl parameter used to retrieve the actual content name, which can now be specified as part of the URL of the page. By calling the page with the URL parameter and the respective content ID you actually display the content with this ID on the page.
Example: yourdomain.com/showPage/?id=start will display the content with ID start on the page
The way StackApps process forms leads to a refresh of the page that actually includes the form. By pressing the submit button, the form page gets called once again and the input of the form gets processed. The StackApps takes care that the form itself will not be displayed the second time as the form knows in what state it is, but any additional text and stuff will be rerendered during the processing phase.
To avoid this behaviour, all non form content should be placed after the Setup Stack which should actually be on the top of the page. Doing so avoids any rerender of the content.
In case of any question, please contact me either via Twitter or mail. Keep in mind that there is no guaranteed response time as this is after all a spare time project for me. Nevertheless, I am more than happy to help if possible.
@gostackapps
support@stackapps.info
Release Notes:
1.5 Feature release (02/04/2014)
New/changed Features
Stacks 2.5 support added (NEW)
Target support for links (NEW)
Special item entry for Select Stack to implement a custom entry for dynamic selects (NEW)
RegEx pattern support for inputs (NEW)
Field links support now attributes with dynamic field support (NEW)
New session variable formAction (‘insert’, ‘update’, ‘delete’ or ‘cancel’) has been added that is not empty after successful forms handling to generate context related output after a form has been processed (NEW). Use in combination with If-Then-Else stack to provide user feedback
New Galleria Stack that supports the Javascript image gallery Galleria (NEW)
Photobox support added to Lightbox Stack (NEW)
Joins for Select and CheckRadio Stack support complex queries (NEW)
DatePicker settings are automatically set while using the standard date formats provided (NEW)
Lister Stack supports RAND() as an order criteria for random order (NEW)
Height setting for DropDown inputs (NEW)
Select and CheckRadio both support an onchange submit that can be used in a search scenario to submit a request immediately (NEW)
Column calculation has been added to the TableGrid (NEW)
Anker target support for TableGrid and Lister (NEW)
Custom upload directory support (NEW)
User specific upload directory support (NEW)
Lister Stack supports two different list structures (NEW)
Redirect has been changed to HTTP redirects instead of form-based (CHANGED)
Cookie code has been replaced (CHANGED)
New Google Analytics code (CHANGED)
Form, Login and Send Verification Stack have changed action link rendering (CHANGED)
HUD categories have been renamed and integrated with standard categories (CHANGED)
Lightboxes have been moved to an own Stack which allows for different configs used within your project (CHANGED)
Lightbox libs have been updated to the most current version (CHANGED)
Show label handling has been switched from CSS to code (CHANGED)
Date format settings in Setup, DateField, RichText Field & Input has been changed. Need to be manually migrated (CHANGED)
Date format settings are now split into a global and a local setting. Local settings can overwrite global settings (CHANGED
Reformating of the various Stack HUD UIs to be more consistent (CHANGED)
DateInput is no longer available. Move to standard Input Stack instead (CHANGED)
Upgraded to CKEditor 4.4 (CHANGED)
Upgraded to the latest filemanager build (CHANGED)
Richtext Editor code has been optimized and another basic editor has been added (CHANGED)
Select Stack setup UI has changed (CHANGED)
Activation Stack has a more flexible activation logic (CHANGED)
SendMail Stack adds a success param to the success/error url in case both are the same (CHANGED)
Disable native Webkit DatePicker in case the StackApps DatePicker is enabled (CHANGED)
Bug Fixes
Known Issues
1.3.13 Feature release (12/20/2013)
Bug Fixes
Known Issues
1.3.12 Bug fix release (10/26/2013)
Bug Fixes
Known Issues
1.3.11 Bug fix release (10/21/2013)
Bug Fixes
Known Issues
1.3.10 Bug fix release (6/23/2013)
Bug Fixes
Known Issues
1.3.9 Bug fix release (5/12/2013)
Bug Fixes
1.3.8 Feature & Bug fix release (5/5/2013)
New Features
Bug Fixes
1.3.7 Feature & Bug fix release (4/28/2013)
New Features
Bug Fixes
1.3.6 Bug fix release (3/4/2013)
Bug Fixes
1.3.5 Bug fix release (3/3/2013)
New Features
Bug Fixes
1.3.4 Feature & Bug fix release (2/10/2013)
New Features
Bug Fixes
1.3.3 Feature & Bug fix release (12/27/2012)
New Features
Bug Fixes
1.3.2 Feature & Bug fix release (12/25/2012)
New Features
Bug Fixes
Known Issues
1.3.1 Bug fix release (12/18/2012)
New Features
Bug Fixes
Known Issues
1.3.0 Feature release (12/16/2012)
New Features
Bug Fixes
Known Issues
1.2.1 Bug fix release (11/07/2012)
Bug Fixes
1.2.0 Feature Release (11/06/2012)
New Features
Bug Fixes
Known Issues
1.1.0 Feature Release (TBD)
Bug Fixes
New Features
1.0.4 Feature release (7/31/2012)
New Features
Known Issues
1.0.3 Bug fix release (7/29/2012)
Fixes
Known Issues
1.0.2 Bug fix release (7/24/2012)
Fixes
Known Issues
1.0.1 Bug fix release (7/23/2012) First bug fix release of StackApps
Fixes
Known Issues
1.0 Initial release (7/20/2012) This is a functional complete, but not fully tested release, which should not be used for production
Known Issues
One of the main objectives during the component design was consistency: similar stacks have similar if not the same configurations & setups. Format options are always designed the same way and should be self explaining in most cases. One of the things you’ll find with every stack is the so-called stacks ID which is always shown in the top/right corner similar to this example: stacks_in_183_page_0 - You can use this id to address this specific stack and its associated DIV within some custom CSS code. Use it wisely and know what you are doing.
As the Setup Stack is required on all pages that use StackApps Stacks, StackApps provides a special Stack that is unlike all other StackApps Stacks. The Setup Stack is available in two different versions: a Local Setup and a Global Setup Stack. The Global Setup Stack can be found within the Stack Templates section and basically shares all its settings across all of its instances. As you basically put the Setup Stack on all pages, the Global Setup Stack shares those settings on all pages and allows for a consistent setup even though there are multiple instances on the website.
Note: the Setup Stack is the first StackApp Stack on each of your pages that contain other StackApp Stacks.
But why do we need a normal Setup Stack anyway? First of all, the Global Setup is based on the Local Setup Stack anyway, but it is also used to overcome a limitation of the Global Setup Stack which is also its strength: you can only use one setup per Global Setup Stack. Local Setup Stacks can for instance access different databases on every page which could solve some rare application requirements.
In 99% of all cases you don’t have to mess around with Local Setup Stacks and Global Setup Stacks will work for you with no limitations.
StackApps comes with an easy to use though very powerful security framework that can handle most of your security requirements you’ll find in your typical apps. In order to use the security framework you need a database table that holds at least a user ID, password and in case of a more finegrained security a security field to hold the access rights. You also need a page that holds the Login Stack. Activate the security feature in the Setup Stack and enter all the required data mentioned above.
Every page that needs to be protected and requires an authenticated user requires a Security Stack on top of the page, right after the Setup Stack. If you want to use finegrained security features, enter the list of security roles or a numeric access level, depending on the security type you have specified in the Setup Stack.
StackApps supports three different security types that can be used to tweak StackApps security model to your needs:
Depending on those types, your user database need to reflect those values in the security field.
Passwords used and stored by StackApps can be hashed in order to be protected from hackers and accidental access to the user database. Use this feature to avoid any security holes and attacks to your generated app.
In order to support the possibility to remember the user login for following sessions, StackApps stores certain infos (no passwords or such) between sessions. Depending on the remember login setting, those infos are either stored in the current session or in a persistent cookie with a given expiration date. In order to avoid any conflicts with other generated apps, the cookie name can be customized. Use a reverse domain naming scheme for this purpose.
Based on StackApps security framework, StackApps also provides a visibility concept which allows for fine-grained visibility of database fields within a TableGrid, Lister or Details Stack. You can decide for every Field Stack if the field as such is visible or not visible based on your access rights or if you just want to make the field visible to everybody, but not the link that is associated with it. This allows for list that can be rendered for everybody, but the details link or edit link is only visible is you have the right to see it.
In case of TabGrids you can also make Columns only visible for certain user groups. This allows for instance for an edit button in a column that is shown only if the user has access to edit records.
StackApps heavily relies on SQL when it comes to create queries within its components. But SQL alone doesn’t fly here as you will have to reference value from the StackApps runtime within the SQL very often. In order to make this possible StackApps extends SQL via a couple of functions that allow you to access runtime information:
source(name) where source ∈ {field, param, paramint, paramlookup, session, cookie, var, globals, server}
Those functions can also be used as default values for Input Stacks as well as variables within the RichTextField unsing the respective template syntax, e.g. %field(id)%.
StackApps uses URL parameters to transfer parameters between views and forms. To configure those parameters correctly, StackApps uses a simple URL parameter scheme:
As you can see the destination is always on the left of the =, whereas the source is on the right.
One of the key features of StackApps to create more complex apps are transfer params, i.e. the possibility to transfer URL parameters to the next page to keep the state that has already been provided. Example: in a TableGrid Stack you show records based on a search query which should stay the same by paging through the TableGrid. In order to make this possible you have to declare the search parameter as a transfer param. Transfer params are defined as a & separated list. If you want to keep pageing or sorting parameters from a TableGrid or Lister, use wildcards to match specifc parameters, e.g. system parameter page_791 can be transferred via page*
One extremely helpful concept are Back References used when linking to an edit form. When using a back reference in a lin to a form, StackApps stores the page you are linking from in an special URL parameter. After the form has been processed and there is a bak reference available, the form redirects back to that page instead of using the form action. This is very useful in scenarios where you have an edit form for a record that can be reached from various other pages. In this case there is no single action page that can be used. Instead you can use the back reference to link back to each of the various originating pages. If you have a conflict in how the back referencing parameter is names, Setup provides you the flexibility to change that parameter name.
A JOIN in database lingo is a means for combining fields from two tables by using values common to each. StackApps provides something similar to JOINS, but not necessarily implemented as a JOIN. StackApps offers 2 types of JOINS, static JOINS and dynamic JOINS. Static JOINS are basically static mappings to map a value from one table to a different value. This is typically used to transform technical representations into readable representations. Let’s imagine you would like to store priorities in a database as int value 1, 2, 3 to represent High, Medium and Low prios. You can easily translate the int value into the string representation via this static JOIN definition: ‘1,High|2,Medium|3,Low’.
The second JOIN type is the dynamic JOIN, which basically does this kind mapping using a second table, key and value field. Given the example above let’s assume that the priorities are stored in a table names ‘prios’ with ‘prio_id’, ‘prio_name’ fields. The dynamic JOIN uses the prio valaue of the source table to index the ‘prios’ table via the ‘prio_id’ and use ‘prio_name’ as the display value.
So, which one is better, static or dynamic JOINS? Well, both have pros and cons. The static JOIN is lightweight and low maintenance, but static, whereas the dynamic JOIN has an overhead attached to it, but can grow at runtime.
Typically StackApps has to deal with single value fields like strings, integers, etc. But there are situations where you want to store multivalues within a database field. StackApps does that does that by storing multivalues in a list, e.g. list(1, 2, 3, 4) which is in turn stored as a string.
But how do you create multivalues? This can be done using a normal Input, entering the list definition, but is normally done via a CheckRadio and Select inputs, which support multivalues.
But how are multivalues displayed? All fields support a so called ‘Format Output’ setting, which is used to format Field outputs, be it a single or multivalue. The format string is setup like this ‘list-element-format|last-element-format’, where formats could be any string with %s replacing the actual field value. Here is an example:
Format String: ‘%s, |%s’
List: list(one,two,three)
Output: one, two, three
Use a single %s with no separator | to format single values.
The CheckRadio & Selct Inputs is very powerful when it comes to representing different input types and values. The following table lists all the different configurations that can be used with the Input
| WIDGET | TYPE | MX | JOIN | Comment |
|---|---|---|---|---|
| Radio | Value(Join) | Yes | Yes | This is a list of mutually exclusive radio buttons with a value depending on the join definition |
| CheckBox | Multivalue(Join) | No | Yes | This is a list of checkboxes with a list of values depending on the join definition |
| CheckBox | Value(0 or 1) | No | No | This is a single checkbox with a value of 0 and 1 depending on the check state |
| Select | Value(Join) | Yes | Yes | This is a single-select list with a list of values depending on the join definition |
| Select | Multivalue(Join) | No | Yes | This is a multi-select list with a list of values depending on the join definition |
StackApps Stacks support a multitude of formatting options which basically translate into related CSS definition. In general, if there are formatting options in a component like a TableGrid, containing Stacks like Column or a TextField Stack can overwrite setting of the parent component and be more specific. Let’s assume you have a font size of 16px defined for the table body, you can easily overwrite the setting for an individual table column content on the TextField level. A value of inherit basically inherits the CSS value from the parent, the more general setting.
If you feel that the given possibilities of a StackApps Stack are too limited, you can specify a custom class name which you can use in your own CSS file or within the CSS Stack that comes bundled with StackApps. Alternatively you can target specific stacks using the stacks ID that is shown on every stack in the right top-corner. There are no limits and whatever CSS can do for you is possible.
StackApps fully supports URL rewriting and especially the cruftless links option that RapidWeaver provides. Enable this option to easily beautify URLs inside RapidWeaver. To make sure that you get nice descriptive Urls rename the path to the page in the respective page inspector.
One of the powerful features of StackApps are the so-called Scripts. Scripts allow you to easily extend the functionality of the StackApps framework by adding custom code that can be triggered by certain events. What type of events are available depend on where you put the Script Stack. There are basically 4 types of locations
On top level
If you put the Script Stack on top level you can only use the Here trigger, which basically executes the script right here.
Inside a Record
i.e. TableGrid, Lister, Details, Login & Form you can use the two Record Display triggers, which can execute before or after the Record is displayed
Inside a Form
you can use the various Insert, Update, Delete and Cancel triggers, which can execute before or after the respective action takes place
Inside a Login
you can use the Do Login & Cancel Login trigger, which can execute before or after the login takes place
Please note: If you want to output something within you custom code, you should use the out() function. You can not use the standard print commands.
StackApps comes with built-in Markdown support in all components that generate text output, i.e. TextField, RichTextField and CMS. When your field contains Markdown formated content, you can enable the Markdown formatter to convert the output into HTML. Use a standard TextArea to actually create Markdown content.
StackApps is not guaranteed to work with other 3rd party stacks, but there is a high probability that StackApps is compatible. You should not place though other stacks into a TableGrid or Column Stack. Just give it a try and don’t be surprised if you run into issues. You’ll be warned :)
The Global Setup Stack is normally used on every StackApps page to give access to all global settings. In case you have to use more than one Setup Stack (you want to use a second database for instance) you have to use the Local Setup Stack in this case.
A set of messages that can be changed on a global basis as part of the Setup stack. Some of these messages can be changed on a stack level as well. You can use the built-in richtext editing features of Stacks to change the text format.
Publish Mode: (select)
Both modes select a set of related settings that can be different for both publish modes
DSN: (input)
A database source that connects to the respective database, i.e. mysql://user:password@127.0.0.1:3306/database connects to db test on server 127.0.0.1 using user root and password root
Error Level: (select)
Sets the error reporting level for the respective publish mode. Make sure you use the right level during production. Please refer to the PHP reference for more details on the respective error levels
Log Errors?: (checkbox)
Do you want to log errors in a file insteaf of showing them on screen?
Error Log File: (input)
This is the file where errors will be logged to in case of file logging being enabled. Make sure that PHP has all the access rights to access the log file. Make sure to log errors to a file in a production system with log level set to E_ALL.
Examples: * UNIX /var/log/httpd/php_error_log * OSX /Users/yourname/Library/Logs/php_error.log
Use ‘syslog’ as a special value to use the system standard logger, i.e. * UNIX /var/log/messages * OSX /private/var/log/system.log
Google Analytics: (input)
An alternative way to integrate Google Analytics that respects the different publish profile, i.e. you can omit analytics for a local profile. Use the property ID provided by Google Analytics here.
Use Local jQuery: (checkbox)
Use a local jQuery instance instead of calling a CDN
Database Debug?: (checkbox)
This setting should only be used during development to trace all database related activities that take place within the ADODB framework. This is very helpful during problem resolution.
Enable Security: (checkbox)
Enable the following security settings. You don’t have to enable these settings if you don’t need protected pages
Security Type: (select)
StackApps supports three different security types that can be used to adapt StackApps security model to your needs:
User Table: (input)
This is the database table that holds all user data used by the security framework
User ID: (input)
This is the field that stores the user id in the database, i.e. the respective index in ther user table
Login: (input)
This is the field that stores the user login in the database
Password: (input)
This is the field that stores the user password in the database
Roles: (input)
The roles field stores the security level of the current user used for the security check described above.
Secret: (input)
StackApps uses a secret to hash login information during runtime. Make sure that this is large enough and keept secret!
Salt Password: (checkbox)
Salt passwords with the hash secret to make them even more secure
Cookie: (input)
In case a user remembers his login, the cookie name will be used to create the respective cookie. This way you can avaoid conflicts with other apps.
Expiration: (number)
Specify the number of days when the app cookie and therefor the login expires for a user.
Login Page: (link)
Select the page that holds the Login Stack. Put the the login page into the parent of any protected page or into the doc root of your site.
BackRef Param: (input)
Provide the name of the systems back referencing parameter used in Forms and other places to store the page you are coming from
Font Awesome: (checkbox)
Enable Font Awesome Fonts
Google Web Fonts: (checkbox)
Enable Google Web Fonts
Font List: (input)
Provide a list of imported Google Web Fonts that can be used in font specifiers
Font Hack: (checkbox)
Set the new font for the BODY of the document to be used within the document
Less: (checkbox)
Enable global Less support
Stylesheet: (link)
Link to the less stylesheet typically in the resource section of the site
Locale: (input)
Define the locale of your website. This is used during date conversion and other locale specific functionality. Use here the standard locale identifier
Timezone: (input)
The Timezone is needed for all date/time related functions and conversions. Just use the standard time zone here. Please refer to the PHP reference material for more details.
Date Format: (input)
Use a standard PHP date format string to format a date field in- and output. This only applys for fields and inputs where no specific data format string is available.
Picker Date Format: (input)
Use a standard jQuery UI Datepicker date format string to format a date input.
The Login Stack is a major part of StackApps security framework. There is typically one Login page within each StackApps project and the Login Stack basically does all what’s required to create this Login page.
Labels: (input)
The main customization for the Login Stack takes place here where you define both the user login and password label. Remember, the actual fields are specified in the Setup Stack Security section. Labels can be formated using the built-in rich text editing of Stacks.
Desc: (input)
Enter a placeholder that will be shown as long as there is no input yet available
Login Font, Label Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Error?: (color)
Change the validation error color by using the standard color swatch
Label Width: (number)
Define the label width of the two input fields in px.
Field Width: (number)
Define the field width of the two input fields in px.
Field Width: (number)
Define the field height of the two input fields in px.
Field Gap?: (slider)
Define the gap between the user ID and password field in px.
Add Label Colon: (checkbox)
Automatically add a colon after each label name?
Password Hashed?: (checkbox)
Is the password hashed in the database?
Hash Algorithm: (select)
Select the has method you want to use for hasing the password. Make sure that the hash method used here is the same as the one used in the admin form.
Remember Login?: (checkbox)
Do you want a ‘Remember Login’ Checkbox?
Display Logged-In State?: (checkbox)
Do you want to display the user and logout button on the login page if the user is logged in?
Login Page: (link)
Select the login page being called after the user has successfully signed in. This is not the case if the login is triggered by accessing a protected page. In this case the protected page will be called after signing in.
Cancel Page: (link)
Select the cancel page being called after the user hits the cancel or logout button of the login dialog.
The Security Stack is the part of StackApps security framework that actually protects a certain page, i.e. the page requires a user to enter his credentials and has the appropriate access right according to the security type of the app defined in the Setup Stack.
Page Access: (input)
Specify the page accesss either as a numeric or a set of roles, depending on the security type of the app. For security type “Authenticated” you can leave this input empty. This is the same as with the Visibility Stack.
Login Page: (link)
Select the page that holds the Login Stack. This is an optional setting in case you want to use multiple logins. There are no limitations here where to put the login page.
Use SSL?: (checkbox)
Enforce the use of SSL for this page. Make sure that SSL is supported on your runtime environment.
The Visibility Stack allows for a more fine-grained page security. Depending on the users access right you can show different content on the page or tell the user that he has to login in in order to see certain content.
The two drop zones hold the respective stacks/content that will be shown if access is granted or not.
The Send Mail Stack is part of a stack duo together with the Activate Stack. The Send Mail Stack is used to send out an email within a Form Stack for instance to newly registered user or the administrator. When using a link within the generated mail, the user finally clicks on the link send to his email, which can in turn call the Activate Stack to actually confirm the email address and activate the account. Both stacks communicate via a common hash field that’s been used to identify the newly created record.
Specify the verification mail that gets send out to the newly created user.
source(name) where source ∈ {field, param, link, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
field: access a field of the record set
param: access a URL string parameter
session: access a session parameter
cookie: access a cookie
var: access a variable
globals: access a global variable
server: access a server variable
Body: (dropzone) Specify the body part of the mail. You can use any kind of content stack to create the mail body.
source(name) where source ∈ {field, param, link, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
Email Field: (input)
The database field that holds the users email address.
Link Param: (input)
The parameter name used within the email embedded link. Typically used for the hash value that is used to check if the actual link send is called.
Send From: (input)
This is the send from address used for the activation email. This doesn’t have to be a real address.
HTML Mail?: (checkbox) Do you want to send out an HTML mail or a plain text mail?
Link Page: (link)
The link to the page provided in the email.
Success Page: (link)
The link to a success page. The related email address will be send via an URL parameter &email=john@doe.com
Error Page: (link)
The link to an error page. The related email address will be send via an URL parameter &email=john@doe.com
The Activate Stack is part of a stack duo together with the Send Activatation Stack. The Activate Stack is used to verify if the user has actually received the mail send by the Send Activation Stack via a unique hash code. If the email is actually verified, the security level of the user will be set to a specific value which gives the user full access to for instance his complete user account.
Add a content stack that will be displayed if the activation is successfull.
source(name) where source ∈ {field, param, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
Add a content stack that will be displayed if the activation is not successfull.
source(name) where source ∈ {param, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
Table Name: (input)
Enter a table name if this is not the user database from the Setup Stack.
Hash Field: (input)
The database field that holds the hash generated for the email verification. The hash value is used to check if the actual link send is called.
Access Rights: (input)
Specify the access right the user gets assigned after a successful registration
The Send Verification Stack is part of a stack duo together with the Reset or the OptOut Stack. The Send Verification Stack is used to send out a verification email to a user . When the user finally clicks on the link send to him by email, he will verify the action and start the action depending on the used verification Stack.
Specify the verification mail that gets send out to the newly created user.
source(name) where source ∈ {field, param, link, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
field: access a field of the record set
param: access a URL string parameter
session: access a session parameter
cookie: access a cookie
var: access a variable
globals: access a global variable
server: access a server variable
Body: (dropzone) Specify the body part of the mail. You can use any kind of content stack to create the mail body.
source(name) where source ∈ {field, param, link, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
Button: (input)
Specify the search button label
Desc: (input)
Enter a placeholder that will be shown as long as there is no input yet available
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Focus?: (color)
Change the focus color by using the standard color swatch
Field Width (number)
Define the search field width in px.
Field Height (number)
Define the search field width in px.
Float: (select) Select the floating behaviour of the search field and the button: left or right
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Style: (select)
Select a text transformation
Text: (color)
Change the text color by using the standard color swatch
Background: (color)
Change the text color by using the standard color swatch
Border: (color)
Change the border color by using the standard color swatch
Style: (select) Change the border style using the standard CSS values
Width: (slider)
Define button border width in px
Radius: (slider)
Define button border radius in px
Padding LR, Padding TB: (slider)
Specify the padding of the search button left, right and top, botton in px
Gap: (slider)
Specify the gap between the input field and the button in px
Email Field: (input)
The database field that holds the users email address.
Link Param: (input)
The link parameter name used within the email embedded link.
Send From: (input)
This is the send from address used for the verification email. This doesn’t have to be a real address.
HTML Mail?: (checkbox) Do you want to send out an HTML mail or a plain text mail?
Link Page: (link)
The link to the verification page.
Success Page: (link)
The link to a success page. The related email address will be send via an URL parameter &email=john@doe.com
Error Page: (link)
The link to an error page. The related email address will be send via an URL parameter &email=john@doe.com
The Reset Stack is part of a stack duo together with the Send Verification Stack. The Reset Stack is used to actually reset a user password after the user has actually received the mail send by the Send Reset Verification via a unique hash code. The Reset Stack uses a normal Form Stack to actually set the new password or any additional profile information at this point.
Add a Form stack that will actually set the new password
Add a content stack that will be displayed if the password reset is not successfull.
source(name) where source ∈ {param, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
The OptOut Stack is part of a stack duo together with the Send Verification Stack. The OptOut Stack is used to actually delete a user account after the user has actually received the mail send by the Send Verification via a unique hash code.
Add a content stack that will be displayed if the password reset is not successfull.
source(name) where source ∈ {param, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
Add a content stack that will be displayed if the password reset is not successfull.
source(name) where source ∈ {param, session, cookie, var, globals, server} joinparam(tableName, indexField, valueField)
Table Name: (input)
Enter a table name if this is not the user database from the Setup Stack.
Hash Field: (input)
The database field that holds the hash generated for the email verification. The hash value is used to check if the actual link send is called.
The TableGrid Stack is one of the most used of all StackApps Stacks. In the CRUD nomenclature, the TableGrid Stack is taking care of the Read part as you can display a set of records of a database table based on a custom query. The TableGrid Stack supports features like paging and column sorters and is highly customizable when it comes to the generated output. Please note: the TableGrid/Column Stack do not support other 3rd party Stacks for layout purposes. This includes even that built-in Stacks that come with Stacks out of the box. All formating and layout need to be inside the fields that get displayed. In case you need more advanced layouting, you might wanna consider to use the Lister Stack that has all that.
The query tries to resemble a simple SQL SELECT statement containing a FROM and a WHERE part. The FROM parts specifies the table we are looking at whereas the WHERE part defines the where clause that filters the table records. As we are always accessing ALL record fields, you don’t have to specify the fields you are interested in. In addition there is no need to declare a sort order using ORDER BY, as this will be handled within the Column Stack.
FROM: (input) Specify the table you are querying by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax. Keep in mind that strings within a WHERE clause are delimited with “string”.
There are a couple of StackApps proprietary extensions available in order use certain custom value within your WHERE clause. You can insert these values by using the following syntax:
source(name) where source ∈ {field, param, paramint, paramlookup, session, cookie, var, globals, server}
Examples:
- field(task_done) <> 100
- blog_active = 1 AND (blog_text LIKE “%param(search)%” or blog_title LIKE “%param(search)%”)
- inventory_id=paramint(id)
First:, Prev:, Next:, Last:, Of:, Show: (input)
A set of messages that can be used to customize the TableGrid pager. You can use the built-in richtext editing features of Stacks to change the text format.
MSG_NO_ITEMS: (input)
You can customize the message that will be shown when viewing an empty result set on a TableGrid basis. This message can be changed on a global basis as well within the Setup Stack.
This is where you define how many columns your table will ultimately display. Add a Column Stack for each column you will display. Each of those columns will finally hold one Field Stack that will actually display the respective field value. Check the Column Stack and the various Field Stacks for more details.
Header Font, Table Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Table Width (input)
Define the table width in % or px
Padding X, Padding Y: (slider)
Define the used cell padding in px
Arrow Size: (slider)
Define the sorters arrow size in px
Remove Page HTML?: (checkbox)
Generate a table only without the surrounding page HTML. This can be used to feed apps like Panic’s Status Board.
Color: (color)
Change the border color by using the standard color swatch
Border Width: (slider)
Define table border width in px
Header Border: (checkbox)
Do you want to draw a header broder as well?
Header Row, Odd Row, Even Row: (color)
Change the header row, odd row and even row background color by using the standard color swatch
Opacity: (slider)
Change the background color opacity in %
Pager?: (checkbox)
Do you want to show/use a pager?
Pager Position: (select)
Where do you want to put the pager, top or bottom?
Pager Size: (number)
Define the number of list elements shown on a page
Example: active,status
The Column Stack is used in combination with the TableGrid Stack. Within the TableGrid Stack you define the number of columns the table should have by adding the respective number of Column Stacks. Each Column Stack then holds one or more Field Stack that actually represents the value that will be displayed in the very table column. Beside that you typically define the sorting for the TableGrid within the Column Stack by marking the column as being sortable and if a column is initially sorted. Those infos will determine the ORDER BY field ASC/DESC part of the TableGrid SELECT that’s been used.
In case you use more than one field per column, only the last one will be used to determine the column label and sort field. But you can use multiple fields to combine multiple joins. You do this by retrieving one field value, join it and store it in a variable. Use the variable as the field name for the next field and do the same thing again, but now using a new join.
Add one or many Field Stack to each column that will be used to retrieve the actual value for the table column. See above for a detailed explaination on how multiple fields will be treated.
Header Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (color)
Change the text color by using the standard color swatch
Text: (color)
Change the text color by using the standard color swatch
Header Align (select)
Define the horizontal alignment for the column/table header: left, center, right, justify
Cell Align (select)
Define the horizontal alignment for the column/table cell: left, center, right, justify
Column Width: (input)
Define column width in % or px
Visibility: (input)
Show the column only if the current user has the appropriate access right.
Enable Column Sorter? (checkbox)
Do you want to sort this column?
Initial Sort? (checkbox)
Do you want to sort the table by this column initially? NOTE: There should only be one Column Stack with this checkbox set.
Sort Descending? (checkbox)
Do you want to sort initially with descending order?
The Lister Stack is very similar to the TableGrid Stack in terms of being able to display a set of records of a database table based on a custom query. But other than the TableGrid Stack, the Lister Stack layouts the result set not in a table-stylel fashion but renders in a list-style fashion. Other than TableGrid Stack, the Lister Stack supports other 3rd party Stacks to layout the list according to your needs, which is not possible in a TableGrid. Like the TableGrid Stack the The Lister Stack supports paging.
The query tries to resemble a simple SQL SELECT statement containing a FROM, a WHERE and a ORDER BY part. The FROM parts specifies the table we are looking at whereas the WHERE part defines the where clause that filters the table records. As we are always accessing ALL record fields, you don’t have to specify the fields you are interested in. In addition you can specify an ORDER BY part listing the fields that you want to use to sort the result set.
FROM: (input) Specify the table you are querying by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax. Keep in mind that strings within a WHERE clause are delimited with “string”.
ORDER BY: (input) Specify the order of the result set by specifying the field name that’s being used to order the set and add DESC or ASC for the sort order. For random results use RAND() as a value.
There are a couple of StackApps proprietary extensions available in order use certain custom value within your WHERE clause. You can insert these values by using the following syntax:
source(name) where source ∈ {field, param, session, cookie, var, globals, server}
Examples:
- field(task_done) <> 100
- blog_active = 1 AND (blog_text LIKE “%param(search)%” or blog_title LIKE “%param(search)%”)
- inventory_id=paramint(id)
First:, Prev:, Next:, Last:, Of:, Show: (input)
A set of messages that can be used to customize the TableGrid pager. You can use the built-in richtext editing features of Stacks to change the text format.
MSG_NO_ITEMS: (input)
You can customize the message that will be shown when viewing an empty result set on a Lister basis. This message can be changed on a global basis as well within the Setup Stack.
This is where you define what kind of record fields you will ultimately display. Add as many Field Stacks as you want to display and use other layout stacks to layout and format your list according to your needs.
Float Items (checkbox)
Do you want to left float each of the fields, i.e. don’t create a seperate line for each Field Stack?
Add Label Colon: (checkbox)
Automatically add a colon after the label name?
Odd Row, Even Row: (color)
Change the odd row and even row background color by using the standard color swatch
Opacity: (slider)
Change the background color opacity in %
Pager?: (checkbox)
Do you want to show/use a pager?
Pager Position: (select)
Where do you want to put the pager, top or bottom?
Pager Size: (number)
Define the number of list elements shown on a page
Example: active,status
The Iterator Stack is very similar to the Lister Stack in terms of being able to iterate over a set of records of a database table based on a custom query. But other than the TableGrid Stack and the Lister Stack the Iterator Stack doesn’t actually render a list or a table, but is usally used to execute custom code for each record. This is done by using the Script Stack inside the Iterator Stack. You can access the current record element by using the varianle $record inside your custom code. Access a specific record field via $record->afield.
The query tries to resemble a simple SQL SELECT statement containing a FROM, a WHERE and a ORDER BY part. The FROM parts specifies the table we are looking at whereas the WHERE part defines the where clause that filters the table records. As we are always accessing ALL record fields, you don’t have to specify the fields you are interested in. In addition you can specify an ORDER BY part listing the fields that you want to use to sort the result set.
FROM: (input) Specify the table you are querying by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax. Keep in mind that strings within a WHERE clause are delimited with “string”.
ORDER BY: (input) Specify the order of the result set by specifying the field name that’s being used to order the set and add DESC or ASC for the sort order.
There are a couple of StackApps proprietary extensions available in order use certain custom value within your WHERE clause. You can insert these values by using the following syntax:
source(name) where source ∈ {field, param, session, cookie, var, globals, server}
Examples:
- field(task_done) <> 100
- blog_active = 1 AND (blog_text LIKE “%param(search)%” or blog_title LIKE “%param(search)%”)
- inventory_id=paramint(id)
This is where your custom code goes using a Script Stack. You can access the current record element by using the varianle $record inside your custom code. Access a specific record field via $record->afield.
The Report Stack can be used to export a DB table content based on a query similar to the TableGrid Stack. Column Stacks are used to define sort oder and concrete table fields that are used during the export. Currently the Report Stack generate CVS type exports as well as Status Board compatible JSON feeds, but additional export formats can be added in the future.
In order to call the Report Stack, create a link to the repective page that hosts the Report Stack.
The query tries to resemble a simple SQL SELECT statement containing a FROM and a WHERE part. The FROM parts specifies the table we are looking at whereas the WHERE part defines the where clause that filters the table records. As we are always accessing ALL record fields, you don’t have to specify the fields you are interested in. In addition there is no need to declare a sort order using ORDER BY, as this will be handled within the Column Stack.
FROM: (input) Specify the table you are querying by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax. Keep in mind that strings within a WHERE clause are delimited with “string”.
There are a couple of StackApps proprietary extensions available in order use certain custom value within your WHERE clause. You can insert these values by using the following syntax:
source(name) where source ∈ {field, param, paramint, paramlookup, session, cookie, var, globals, server}
Examples:
- field(task_done) <> 100
- blog_active = 1 AND (blog_text LIKE “%param(search)%” or blog_title LIKE “%param(search)%”)
- inventory_id=paramint(id)
This is where you define how many columns your table will ultimately display. Add a Column Stack for each column you will display. Each of those columns will finally hold one Field Stack that will actually display the respective field value. Check the Column Stack and the various Field Stacks for more details.
Format: (select)
Select the export format of this report, CSV, Status Board compatible JSON format or Table format. s.a. Status Board
Output: (select)
Select the output type i.e. stream or download. Stream generates a normal data stream in a given format, download initiates the download of a generated file. If you want to feed an app like Panic’s Status Board, use stream.
Filename: (input)
Set a custom file name for the export file in case of download type. If empty, the table name and .csv as an file extension is used.
Header: (select)
Determine if the column header is based on the field name or the column label
Separator: (input)
The value separator used during CSV export.
Diagram: (select)
Choose between Bar and Line graph type. There is another feature that allows you to select the graph type via a URL parameter provided when calling the respective page URL. Use the parameter diagram=bar|line to select the respective graph type. This way you don’t have to generate two different reports for each graph type.
Refresh: (number)
Set the refresh rate in seconds for the Status Board widget.
Colors: (input)
A comma separated list of color values that associate with the respective bar or graph item. Possible values are yellow, green, red, purple, blue, mediumGray, pink, aqua, orange, or lightGray
Show every X-axis label?: (bool)
Show every X-axis label.
Show Total?: (bool)
Add a total element to the graph.
Show every X-axis label?: (bool)
Show every X-axis label.
Y Min & Max Value: (number)
Set the displayed Y min and ax values.
Y Unit Pre & Suffix: (input)
Set the displayed Y min and max values.
Other than the TableGrid and Lister Stacks, the Details Stack just displays a single table record of a database. Typically this is a details page that shows all fields of the record instead of just a few like in a TableGrid or Lister. The typical use case here is that by clicking on a record in a TableGrid or Lister Stack you will link to the Details Stack to actually show the details of that specific record.
The query tries to resemble a simple SQL SELECT statement containing a FROM, and WHERE. The FROM parts specifies the table we are looking at whereas the WHERE part defines the where clause that filters the table records. As we are always accessing ALL record fields, you don’t have to specify the fields you are interested in. 99% of all where clauses are referring the the tables primary key here.
FROM: (input) Specify the table you are querying by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax. Keep in mind that strings within a WHERE clause are delimited with “string”.
There are a couple of StackApps proprietary extensions available in order use certain custom value within your WHERE clause. You can insert these values by using the following syntax:
source(name) where source ∈ {field, param, session, cookie, var, globals, server}
Examples:
- inventory_id=param(id)
This is where you define what kind of record fields you will ultimately display. Add as many Field Stacks as you want to display and use other layout stacks to layout and format your output according to your needs.
Details Font, Label Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Label Width (number)
Define the label width of the fields in px on a Details Stack level. You can always overwrite the setting for each individual Field Stack.
Add Label Colon: (checkbox)
Automatically add a colon after the label name?
The Newsletter Stack is used to send out a newsletter to a group of subscribers, usually your customers or users. You typically have a newsletter table which holds the newsletter body text. This newsletter table can be managed with your own Form and can be displayed with a TableGrid Stack and you can link from this page to the actual send newsletter page which holds the Newsletter Stack using an URL parameter specifying the newsletter that should be send out to your users. On the Newsletter page you include the Newsletter Stack and inside the Newsletter Stack you place a Details Stack that retrieves the newsletter content for the specific newsletter being send out to your subscribers based on the URL parameter. Use the appropriate query in the Details Stack.
The query tries to resemble a simple SQL SELECT statement containing a FROM, and WHERE. The FROM parts specifies the table we are looking at whereas the WHERE part defines the where clause that filters the table records. As we are always accessing ALL record fields, you don’t have to specify the fields you are interested in. 99% of all where clauses are referring the the tables primary key here.
FROM: (input) Specify the table you are querying by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax. Keep in mind that strings within a WHERE clause are delimited with “string”.
There are a couple of StackApps proprietary extensions available in order use certain custom value within your WHERE clause. You can insert these values by using the following syntax:
source(name) where source ∈ {field, param, session, cookie, var, globals, server}
Examples:
- inventory_id=param(id)
This is where you define what kind of record fields you will ultimately display. Add as many Field Stacks as you want to display and use other layout stacks to layout and format your output according to your needs.
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Style: (select)
Select a text transformation
Text: (color)
Change the text color by using the standard color swatch
Background: (color)
Change the text color by using the standard color swatch
Border: (color)
Change the border color by using the standard color swatch
Style: (select)
Change the border style using the standard CSS values
Width: (slider)
Define button border width in px
Radius: (slider)
Define button border radius in px
Padding LR, Padding TB: (slider)
Specify the padding of the search button left, right and top, botton in px
Email Field: (input)
The database field that holds the users email address.
Send From: (input)
This is the send from address used for the verification email. This doesn’t have to be a real address.
HTML Mail?: (checkbox)
Do you want to send out an HTML mail or a plain text mail?
The Search Stack is typically used in combination with a TableGrid or Lister Stack. It generates a search field and a search button that will trigger another page that will be called with a search parameter included in the URL that can be used on the new page to filter a TableGrid or Lister Stack.
Add Input Stacks and a ButtonSet Stack to build the search form
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Focus?: (color)
Change the focus color by using the standard color swatch
Field Width (number)
Define the search field width in px.
Field Height (number)
Define the search field width in px.
Font: (select) Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select) Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Style: (select)
Select a text transformation
Text: (color)
Change the text color by using the standard color swatch
Background: (color)
Change the text color by using the standard color swatch
Border: (color)
Change the border color by using the standard color swatch
Style: (select) Change the border style using the standard CSS values
Width: (slider)
Define button border width in px
Radius: (slider)
Define button border radius in px
Padding LR, Padding TB: (slider)
Specify the padding of the search button left, right and top, botton in px
Action: (link) Select the action page of the search form that will be called after pressing the search button or hitting the return key.
Transfer: (input)
A list of & separated URL parameters that will be transfered from the original URL Example: order&comment_id
Exclude Param (checkbox)
Should the transfer parameters be excluded from the original URL parameters
The TextField Stack is most probably one of the most used stacks in combination with the TableGrid and Lister Stacks. It’s main purpose is to retrieve a field value from the current result set, format the output and display it on the page. The output can be adjusted via various options and modified with an powerful join mechanism. Finally the output can be wrapped with a link to another page including multiple URL parameters.
Label: (input)
Define the label name of the field
Field: (input)
Define the field name as used in the database or reference an existing variable, e.g. $result
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Class: (input)
Add one or a list of css classes to the field DIV
Show Label: (checkbox)
Do you want to show the field label?
Label Width (input)
Define the label width in % or px
Align (select)
Define the horizontal alignment field value: left, center, right, justify
Float (checkbox)
Do you want to float the field?
Direction (select)
Define the direction of the float: left or right
Use Markdown?: (checkbox)
Do you use the Markdown markup inside the content?
Strip HTML?: (checkbox)
Do you want to strip all HTML markup before rendering the content?
Limit: (number)
Limit the output to a specified number of characters. Leave this empty if you don’t want a limit at all. This limit applies for each element of multi-value fields. Format output is applied after the size has been limited.
Format: (input)
This is a format string that defines how the field output will be rendered. Use %s as a variable for the field content within the format string. For multivalues the string contains two parts separated by a | character. The first part defines how list elements will be rendered, whereas the second part is used for the last element of a list. Example: %s, | %s renders a list of 1,2,3,4 as 1, 2, 3, 4
Static Text: (input)
This text is rendered no matter of the value of the field. This is an option to create static text links with a dynamic URL. You don’t use a database field in this case, especially not the field you wanna use in the action. Simply leave the field name empty.
Join: (select)
Joins are used to translate an actual field value into another value by using the actual field value as an index to find the new value. Joins can be either
Depending on your concrete situation or requirement choose either one or the other. The dynamic join can dynamically extended during run time while the static join is fixed during compile time.
Target: (select)
A field normally generates output that gets rendered on the page directly. In order to work with the output of the field in another later step, e.g. in a Richtext Field, you can store the value in a variable that can be accessed either in custom code or via %global(var)% resp. global(var) later.
Visibility: (input)
Control the visibility of the field by specifying a access level.
Type: (select)
Select the action type used for the link that’s being generated
The RichTextField Stack is similar to the TextField Stack but allows for multiple field values to be displayed at once using a pattern mechanism and the built-in richtext formating of Stacks.
Use the main editing area of the RichTextField to layout the output. To actually retrieve values to be displayed use as many %[mod]source(name)% expressions as needed, where mod ∈ {link,join,linkjoin}, source ∈ {field,static,param,session,cookie,var,globals,server} link will create a action link for this expression, whereas join will join the expression value with the Join definition of the field. Please keep in mind that there is only one action and join definition per Stack. If you need more complex settings, you have to split those things up.
Margin Left: (number)
Set the left margin for the field in situations where you want to move the field content to the left on a Details Stack. In this case use negative values for the margin that reflects the label width, e.g. –100px
Float (checkbox)
Do you want to float the field?
Direction (select)
Define the direction of the float: left or right
Use Markdown?: (checkbox)
Do you use the Markdown markup inside the content?
Strip HTML?: (checkbox)
Do you want to strip all HTML markup before rendering the content?
Limit: (number)
Limit the output to a specified number of characters. Leave this empty if you don’t want a limit at all. This limit applies for each element of multi-value fields. Format output is applied after the size has been limited.
Format: (input)
This is a format string that defines how the field output will be rendered. Use %s as a variable for the field content within the format string. For multivalues the string contains two parts separated by a | character. The first part defines how list elements will be rendered, whereas the second part is used for the last element of a list. Example: %s, | %s renders a list of 1,2,3,4 as 1, 2, 3, 4
Date Format: (input)
Use a standard PHP date format string to format a date field output. This obviously only applys for fields of data type time, date, etc. If empty, the global setting will be used.
Static Value: (input)
This text is rendered no matter of the value of the field. This is an option to create static text links with a dynamic URL.
Join: (select)
Joins are used to translate an actual field value into another value by using the actual field value as an index to find the new value. Joins can be either
Depending on your concrete situation or requirement choose either one or the other. The dynamic join can dynamically extended during run time while the static join is fixed during compile time.
Target: (select)
A field normally generates output that gets rendered on the page directly. In order to work with the output of the field in another later step, e.g. in a Richtext Field, you can store the value in a variable that can be accessed either in custom code or via %global(var)% resp. global(var) later.
Visibility: (input)
Control the visibility of the field by specifying a access level.
Type: (select)
Select the action type used for the link that’s being generated
The DateField Stack is very similar to the TextField Stack, but is used for date/time format fields.
Label: (input)
Define the label name of the field
Field: (input)
Define the field name as used in the database
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Class: (input)
Add one or a list of css classes to the field DIV
Show Label: (checkbox)
Do you want to show the field label?
Label Width (input)
Define the label width in % or px
Align (select)
Define the horizontal alignment field value: left, center, right, justify
Float (checkbox)
Do you want to float the field?
Direction (select)
Define the direction of the float: left or right
Date Format: (input)
use a standard PHP date format string to format a date field output. This obviously only applys for fields of data type time, date, etc. If empty, the global setting will be used.
Target: (select)
A field normally generates output that gets rendered on the page directly. In order to work with the output of the field in another later step, e.g. in a Richtext Field, you can store the value in a variable that can be accessed either in custom code or via %global(var)% resp. global(var) later.
Visibility: (input)
Control the visibility of the field by specifying a access level.
Type: (select)
Select the action type used for the link that’s being generated
The ImageField Stack can be used to display images (single or multivalue) either by retrieving their filename or URL from the database. This Stack supports fields with multiple values.
Label: (input)
Define the label name of the field
Field: (input)
Define the field name as used in the database
Default: (image)
The default images that gets displayed in case there is no image available in the database
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Class: (input)
Add one or a list of css classes to the field DIV
Show Label: (checkbox)
Do you want to show the field label?
Label Width (input)
Define the label width in % or px
Align (select)
Define the horizontal alignment field value: left, center, right, justify
Float (checkbox)
Do you want to float the field?
Direction (select)
Define the direction of the float: left or right
Type: (select)
Choose the image type you want to use. This could be a normal image or a QRcode that is generated based on a field value or an action URL
Image, i.e. a normal image
Join: (select)
Joins are used to translate an actual field value into another value by using the actual field value as an index to find the new value. Joins can be either
Depending on your concrete situation or requirement choose either one or the other. The dynamic join can dynamically extended during run time while the static join is fixed during compile time.
Target: (select)
A field normally generates output that gets rendered on the page directly. In order to work with the output of the field in another later step, e.g. in a Richtext Field, you can store the value in a variable that can be accessed either in custom code or via %global(var)% resp. global(var) later.
Visibility: (input)
Control the visibility of the field by specifying a access level.
Type: (select)
Select the action type used for the link that’s being generated
The CMS Stack is a very powerful stack that can be used on top level (i.e. no TableGrid, Lister or Details Stack required) to retrieve content from a database and display it either within the page main content area or in an ExtraContent area. If your template supports ExtraContent, you can even target those areas by selecting the specific EC area.
Mode: (select)
Select static or dynamic content ID mode. The static mode uses a static content ID to retrieve the content from the DB whereas the dynamic mode uses an URL parameter to send the content ID to the Stack.
Table: (input)
Specify the content table name
ID Field: (input)
Specify the content ID field that will be used to retrieve the content based on the specifc content ID mentioned above
Content Field: (input)
Specify the content field that actually holds the content
Use Markdown?: (checkbox)
Do you use the Markdown markup inside the content?
Strip HTML?: (checkbox)
Do you want to strip all HTML markup before rendering the content?
Limit: (number)
Limit the output to a specified number of characters. Leave this empty if you don’t want a limit at all.
Target: (select)
Select the page area you want to target with the content?
Edit Button?: (checkbox)
Do you want to show an edit button that directly links to the respective content editor?
Text link: (input)
This is the text link that will be generated in case of the edit button is enabled
Visibility: (input)
Specify which access level is able to see the edit button
Editor Page: (link)
Select the page that will be called if you press the edit button. This page should host the editor for this content.
Param: (input)
Specify the parameter and the primary key field that will be used as an index to the edit page. Example: id=content_id
The Form Stack is the heard of any update operation of the database. Through the Form Stack you can create, update and finally delete database records. In order to do its work, the Form Stack uses a set of Input Stacks which are representing the various database fields within the form.
The query tries to resemble a simple SQL UPDATE statement with a table name and a WHERE part. The WHERE part defines the where clause that determines the record that gets updated by the form. This is typically done using the primary key of the table and an external parameter.
UPDATE: (input) Specify the table you are updating by entering the actual table name
WHERE: (input) Specify the WHERE part of the SQL query. This is using regular SQL syntax plus the special variables param(name) and paramint(name) that can be used to access an external URL parameter. Keep in mind that strings within a WHERE clause are delimited with “string”.
param: access a URL string parameter
paramint: access a URL int parameter (use this for int only params to avoid code injection)
Examples:
- inventory_id=param(id)
This is where you add the various Input Stacks of the form. make sure that there is a Input Stack for all record fields available, even for those which are hidden e.g. creation date, etc.
Form Font, Label Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Label Width (input)
Define the label width in px
Field Width (input)
Define the field width in px
Field Height (input)
Define the field height in px
Field Gap (slider)
Define the gap between input rows in px
Label Above: (checkbox)
Move the label above the field?
Add Label Colon: (checkbox)
Automatically add a colon after each label name?
Add ‘Required’ Marker: (checkbox)
Automatically add an asterix after each label of a required field?
Method (select)
Select the HTTP method used for that form. This is typically POST.
Encoding (select)
Select the HTTP method used for that form. This is typically POST.
Locale (input)
The locale used during form validation, e.g. en, de, it, …
Input (input)
This is a list of field/parameter pairs that will be used to initialize certain fields with URL parameter values, e.g. comment_id=comment&blog_id=blog
Action Page: (link)
Set the action page that will be called after the form has been successfully processed, i.e. no validation errors occured
Cancel Page: (link)
Set the cancel page that will be called (if set) after the cancel button has been processed, i.e. form has been canceled
Transfer: (input)
A list of & separated URL parameters that will be transfered from the original URL Example: order&comment_id
Exclude Param (checkbox)
Should the transfer parameters be excluded from the original URL parameters
The Input Stack is the most generic form input you can use inside Form Stacks
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field name as used in the database.
Desc: (input)
Enter a placeholder that will be shown as long as there is no input yet available
MSG: (input)
Enter a custom validation error message used for custom server validation. Use %1$s as a place holder for the field name.
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Focus?: (color)
Change the focus color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Field Width (number)
Define the field width in px
Field Height (number)
Define the field height in px
Default (input)
Define the default value. You can use a constant as well as a set of predefined functions
Date Format: (select)
Use a standard PHP date format string to format a date input. If inherit is used, the global setting will be used.
Use DatePicker?: (checkbox)
Do you want to use a jQuery UI based Datepicker? Let’s do it …
Picker Format: (input)
Use a standard jQuery UI Datepicker date format string to format a date input in case of a custom date format is used.
Theme: (input)
You can use your own theme for the Datepicker. Using the jQuery ThemeRoller you can create your own theme, upload it in ther RW resource section and enter the theme name here.
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
Type: (select)
Set the type of the input field according to the HTML5 spec. The behavior varies depending on the used browser. This makes the Date Input superflous as the functionalty is now fully included here.
Validation: (select)
Set the validation type of the input field e.g. standatd, client, server, client & server. accrding to the HTML5 spec. If used, specify the custom validation as a RegEx pattern.
Pattern: (input)
Set the RegEx pattern used for custom input validation. Check HTML5 Pattern fot examples
Hash Input?: (checkbox)
Do you want hash input before storing it in the database?
Is Repeated Input (checkbox)
Is this a repeated input of another input?
Stack ID (input)
Specify the Stack ID as a back reference to the primary Input that should have the same value as this Input, e.g. stacks_in_101_page4.
The DateInput Stack is very similar to the standard Input Stack but knows about date formatting. Date Input is now deprecated as the Input Stack now supports date fields as well. This stack is deprecated and will no longer be modified or enhanced. Move to the more powerful Input stack instead.
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field name as used in the database
Desc: (input)
Enter a placeholder that will be shown as long as there is no input yet available
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Focus?: (color)
Change the focus color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Field Width (number)
Define the field width in px
Field Height (number)
Define the field height in px
Default (input)
Define the default value. You can use a constant as well as a set of predefined functions
Date Format: (input)
Use a standard PHP date format string to format a date input. If empty, the global setting will be used.
Use DatePicker?: (checkbox)
Do you want to use a jQuery UI based Datepicker? Let’s do it …
Picker Format: (input)
Use a standard jQuery UI Datepicker date format string to format a date input.
Theme: (input)
You can use your own theme for the Datepicker. Using the jQuery ThemeRoller you can create your own theme, upload it in ther RW resource section and enter the theme name here.
The CheckRadio Stack is used to input boolean values either as checkboxes or radios buttons. CheckRadio can handle multivalues as well.
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field name as used in the database
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Default (input)
Define the default value. You can use a constant as well as a set of predefined functions
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
Use Checkbox?: (checkbox)
Do you want to use checkboxes instead of radio buttons?
Multivalue?: (checkbox)
Allow multi values? This makes sense only with checkboxes.
Format Output: (input)
This is a format string that defines how the input will be rendered. The string contains two parts seperated by a | character. The first part defines how list elements will be rendered, whereas the second part is used for single values or the last element of a list. Use %s as a variable for the field content within the format string. Example: %s, | %s renders a list of 1,2,3,4 as 1, 2, 3, 4
Join: (select)
Joins are used to translate an actual field value into another value by using the actual field value as an index to find the new value. Joins can be either
Note: you have to use a JOIN with CheckRadio inputs in order to create the various options even though you might not use the multivalue feature.
The CheckRadio Stack is used to input boolean values either as checkboxes or radios buttons. CheckRadio can handle multivalues as well.
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field name as used in the database
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Field Width (number)
Define the input field width in px
Select Size: (number)
Define the number of items that are shown in the select
Default (input)
Define the default value. You can use a constant as well as a set of predefined functions
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
Multivalue?: (checkbox)
Allow multi values?
Format Output: (input)
This is a format string that defines how the input will be rendered. The string contains two parts seperated by a | character. The first part defines how list elements will be rendered, whereas the second part is used for single values or the last element of a list. Use %s as a variable for the field content within the format string. Example: %s, | %s renders a list of 1,2,3,4 as 1, 2, 3, 4
Join: (select)
Joins are used to translate an actual field value into another value by using the actual field value as an index to find the new value. Joins can be either
Note: you have to use a JOIN with Select inputs in order to create the various options even though you might not use the multivalue feature.
The CheckRadio Stack is used to input boolean values either as checkboxes or radios buttons. CheckRadio can handle multivalues as well.
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field name as used in the database
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Width (number)
Define the text area width in chars
Height (number)
Define the text area height in chars
Default (input)
Define the default value. You can use a constant as well as a set of predefined functions
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
Use Richtext Editor?: (checkbox)
Do you want to use a richtext editor?
Editor Type?: (checkbox)
Select the used editor type, i.e. simple, advanced, full?
Image Browser: (link)
Provide the link to the page that is the image browser for the TextArea Stack.
The Upload Stack is used to upload files to the server. Make sure you set the form encoding methode to Multipart in this case.
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field name as used in the database
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Field Width (number)
Define the field width in px
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
Filetype: (checkbox)
Set the allowed filetypes using comma separated list of mime types e.g. image/jpeg, image/png. Leave this empty if there is no restriction.
Max Size (number)
Define the max upload size in KB. Leave this empty if there is no maximum defined.
Max Width (number)
Define the max image width in px. Leave this empty if there is no maximum defined.
Max Height (number)
Define the max image height in px. Leave this empty if there is no maximum defined.
Upload Dir: (link)
Select the image dir to where the files will be uploaded to? Don’t use remote servers here, just local directories.
Multiple Uploads: (checkbox)
Enable multiple file uploads? Files will be stored as a multivalue list inside the field. Male sure that there is enough space available.
Max Uploads (number)
Limit the number of uploads in case of multiple uploads. Leave this empty if there is no maximum defined.
Unique Name: (checkbox)
Generate unique file names?
Store Path?: (checkbox)
Store the full path instead of the filename only?
The Hidden Stack is used to input form value without having a visible input field.
Default (input)
Define the default value. You can use a constant as well as a set of predefined functions
Force Default?: (checkbox)
Force the default value even for updated records? This could be used to overwrite a field in a form.
Date Format: (select)
Use a standard PHP date format string to format a date input. If inherit is used, the global setting will be used.
The Captcha Stack creates a CATCHA that you can use inside Form Stacks
Label: (input)
Define the label name of the input field
Field: (input)
Define the input field which is actually not in the database. This is used internally only.
Desc: (input)
Enter a placeholder that will be shown as long as there is no input yet available
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Color?: (checkbox)
Do you want to change the colors?
Text: (color)
Change the text color by using the standard color swatch
Focus?: (color)
Change the focus color by using the standard color swatch
Show Label: (checkbox)
Do you want to show the field label?
Label Width (number)
Define the label width in px
Field Width (number)
Define the field width in px
Field Height (number)
Define the field height in px
Float? (checkbox)
Float the image and the input field
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
Width (number)
Define the CAPTCHA width in px
Height (number)
Define the CAPTCHA height in px
# Chars (number)
Define the number of used chars
# Lines (number)
Define the number of background lines
Use Color?: (checkbox)
Use colors for the background lines?
The ButtonSet Stack generates a variety of buttons for the Form and the Login Stack. Just add the stack to the respective Form and Layout Stack and you are done.
Font: (select)
Select the render font from the list of predefined fonts, choose Inherit to use the themes font or select Custom to use a custom font. Make sure that whatever font is used here is available on your target system.
Size: (select)
Choose the font size from a set of predefined sizes
Custom Size: (input)
Define the required text size using the usual CSS size units eg. 15px/150%. Leave this input empty to inherit the font size from the surrounding container or the theme.
Transform: (select)
Select a text transformation
Bold?, Italic?: (checkbox)
Change the text format by checking bold and/or italic
Style: (select)
Select a text transformation
Text: (color)
Change the text color by using the standard color swatch
Background: (color)
Change the text color by using the standard color swatch
Border: (color)
Change the border color by using the standard color swatch
Style: (select) Change the border style using the standard CSS values
Width: (slider)
Define button border width in px
Radius: (slider)
Define button border radius in px
Padding LR, Padding TB: (slider)
Specify the padding of the search button left, right and top, botton in px
Width: (input)
Define button width in px
Gap: (slider)
Specify the gap between the search field and the button in px
Align: (select)
Select a button alignment
Float (checkbox)
Do you want to float the bottons?
Type: (select)
Select the required button types
Tab Index: (number)
Index that defines the tabbing order of the element within the form or leave this empty. Set this to 0 if you want to exclude a form element.
The Script Stack allows you to add custom code to your app. Place it in layout where you want the code to be executed. Within a script you can access the context in which the script is executed via the $context vaiable. This is either a Record or a Form. Scripts provide a couple of custom settings that can be used to customize a script. See also Script - Custom. To access or store values on a global scope access variables via $GLOBALS[‘varname’]. Scripts are triggered by certain events that relate to Record and Forms operations.
Code Trigger: (select)
Select the event that should trigger the respective piece of code. Those events are related to record and form operations.
Code Use ‘nowdoc’ PHP >= 5.3: (checkbox)
If you are using PHP >= 5.3 on your environment, you can leverage a feature that is only available on those environments and gives you more freedom in regards to what’s being allowed in side a Script Stack. Using the nowdoc systax for strings, you can use all characters including single and double quotes. If you on a PHP environment which doesn’t support nowdoc syntax, you can not use single quotes inside scripts.
Debug: (checkbox)
Scripts output some debug info during invocation.
Custom Values?: (checkbox)
Enable custom value settings that can be used inside your custom code
Input1–3: (input)
Use 3 different custom inputs inside your code. Those fields can be referenced by $customInput1, …, $customInput3
Color1–2: (color)
Use 2 different custom colors inside your code. Those fields can be referenced by $customColor1, $customColor2
Link: (link)
Use a custom link inside your code. This field can be referenced by $customLink1
The IfThenElse Stack allows you to display/execute stacks depending on some custom code expression.
The two drop zones hold the respective stacks/content that will be shown if your expression evaluates to true or false.
The CSS Stack generates a inline CSS section that can be used to customize the page layout.
The Tag Stack generates can be used to generate arbitrary HTML code with begin and end tags. Use this stack to create DIVs with custom class names or anything you like.
Add the custom code in front or after the drop zone. Male sure you balance tags right.
The Markdown Stack converts a Markdown text into normal HTML section.
The Lightbox Stack adds a flexible lightbox effect to images.
In case you select the Slimbox 2 you have additional settings available
Selector Rel: (input)
Define the rel attribute used to select Slimbox 2 enabled links. Use this rel attribute in your image links. Group links by adding a unique identifier e.g. lightbox-group.
Localize: (input)
Use the string “Image {x} of {y}” to translate the Slimbox 2 strings. Make sure you don’t modify the format.
In case you select the Colorbox you have additional settings available
Selector Class: (input)
Define the class used to select Colorbox enabled links. Use this class name in your image links..
Group Rel: (input)
Define the rel attribute used to group Colorbox enabled links. Use this rel name in your image links. To ungroup links, use nofollow as rel name.
Theme: (select)
Select out of 5 different lightbox themes
Animation: (select)
Select between 3 different animations used by the lighbox
Scale Photos: (checkbox)
Are photos going to be scaled to fit on the screen?
Slideshow: (checkbox)
Photos are displayed in a slideshow that automatically starts and has a delay of 5 secs.
Localize: (input)
Use the string “close|previous|next|{current} of {total}|start show|stop show” to translate all Colorbox strings. Make sure you don’t modify the format.
The Galleria Stack enables the usage of the Galleria image gallery to be used inside StackApps. The usage of Galleria as such is free, but the available themes nees to be purchased individually.
After you have purchased the themes, they have to be added to the stack manually.
The Floater Stack allows you float its containing stack left or right in order to create fluid layouts
The FieldSet Stack generates a highly customizable HTML fieldset
Add the FieldSets containing content and change the FieldSet label
Highlight Legend: (checkbox)
Highlight the fieldset legend
Padding LR, Padding TB: (slider)
Specify the LR and TB padding of the fieldset
Background Color?: (checkbox)
Do you want to change the fieldsets background color?
Background: (color)
Change the fieldsets background color
Border: (color)
Change the fieldsets border color
Width: (slider)
Change the fieldsets border width in px
Radius: (slider)
Change the fieldsets border radius in px
Shadow: (slider)
Change the fieldsets shadow size in px
Blur: (slider)
Change the fieldsets blur size in px
The Hauler Stack allows other Stacks to target page areas like the header, sidebar, footer, ExtraContent areas or any custom area that can be addressed via a CSS selector. You can even decide to put content before or after the respective area. If your template supports ExtraContent, you can target those areas by selecting the specific EC area. In addition to assign a static ExtraContent area, the CMS Stack supports dynamic assignment, i.e. you can specify in your content database which ExtraContent area is targeted by a specific content. Check the CMS Stack for more details.
Add the Stack that should be moved to a different area
Target: (select)
Select the page area you want to target with the content?
As of right now, StackApps is free to use but not yet open source. Even though I intend to move StackApps under one of the major open source licenses I consider StackApps to be under my full control for the time being.
Please keep in mind that i am not responsible for any damages and liabilities caused by apps generated by the StackApps framework.
StackApps uses a couple of 3rd party libraries and frameworks that are protected by their own license agreements. StackApps is referring to those license agreements in case of any questions. Please make sure that you comply with those licenses in case of commercially using any code generated by StackApps.
ADODB is used as the underlying abstraction layer to access the used database. Check the respective license.
CKEditor can be used as a richtext editor as a replacement for a textarea input. Check the respective license.
PHP Markdown is a PHP library used to format content based on the Markdown markup language, introduced by John Gruber. Check the respective license.
php-captcha is a PHP library used to generate and verify simple captchas, written by Edward Eliot. Check the respective license.
The iconic font designed for use with Twitter Bootstrap. Check the respective license.
Free web fonts provided by Google. Check the respective license.
A jQuery plugin to generate a QR code. Check the respective license.
Used to provide a UI DatePicker. Check the respective license.
A PHP library to parse, search and modify an HTML5 DOM. Used to manipulate the site navbar. Check the respective license.
A PHP library to determine the size of an bitmap image. Doesn’t require any image library like GD. Check the respective license.
An ultraslim Lightbox clone. Check the respective license.
A lightweight customizable lightbox plugin for jQuery. Check the respective license.
A powerful server-side image scaler. Check the respective license.
A flexible, powerful filemanager used by CKEditor. Check the respective license.
A flexible, powerful lightbox plugin for jQuery. Check the respective license.
A powerful themed image gallery. Make sure you purchase the respective themes in order to be used within the stack. Check the respective license.
A flexible, powerful lightbox plugin for jQuery. Check the respective license.
StackApps has quiet a long history: inspired by RAD tools like CodeCharge, I had this app development framework already developed in 2006/2007 as a spare time project using NetObjects Fusion as a host environment, but never released this project to the public. At time it was called ConFusion :)
Being written in Java as a Fusion plug-in initially, I decided to move this project to RapidWeaver in 2011, my new web development platform on the Mac.
At the beginning I tried to implement StackApps as a native RapidWeaver plug-in using Objective-C, but soon I realized that this was too much of an effort, as there was no good component layout engine available in the SDK.
As YourHead Stacks for RapidWeaver became more and more popular as the unofficial plug-in API for RapidWeaver, I decided to start the project using Stacks as the development environment. Stacks is not only much simpler to use compared to the official RapidWeaver plug-in API, it also offers a flexible and powerful layout engine & component model which perfectly suited my requirements.
December 2010 I started with the development and finally finished the first internal release around August 2011. At the time it became obvious that Stacks was about to get its next major version update which fixed a lot of the initial UI limitations of Stacks. Participating in the early beta I soon decided to migrate StackApps to Stacks 2.0 first before releasing it to the public.
With Stacks 2.0 now being released to the public it’s about time to release StackApps as well, being the first full-fledged application development framework being available for Stacks.
StackApps is currently available at (http://stackapps.designdisorder.com/download).