Share your Editors

[Beta Spark]

Have you built an Editor or Editor Set using the Tablet Optimized Forms? Have you modified existing Editors to meet your needs? Share them with us!

Post images, code, whatever you feel is the best way to share your Editor.

What's an Editor?

Don't know what an Editor is? Check out these resources and start building one today! We have a number of videos available covering everything from the basics to building fully-customized editors using ViewBoxes (ViewBoxes were used to create the keypads and checklist item Editors in the Sample Tablet App.)

• Introduction to the FormView Control: Learn the basics of the FormView control, Editors and Editor sets.
• Editors: Using a Dropdown Box: Discover how a dropdown box can be used in an Editor
• Editors: Cascading Dropdown Boxes: A continuation of a previous thread, Editors: Using a Dropdown Box, which covers how to implement cascading dropdown boxes within the context of tablet form Editors and Editor Sets.
• Editors: Cascading List Control: Learn how to create a cascading List control Editor.
• Editors: Populating a List from a SQL Query: Lists can be populated from a variety of sources. Discover how the onDialogInitialize event can be used to cache data to populate a List control Editor.
• Editors: Pre-Defined List Control Editor: Dropping in a list control for editing data is made easier with the Editor-List. Learn how to leverage this control in your mobile apps.
• Introduction to Group Editors: Learn how to edit a group of controls together using a Group Editor.
• Tablet Sample App: Custom Keypads: Discover how the custom keypads in the sample tablet application were created.
• Tablet Sample App: Checklist Items: Learn how the checklist item in the sample tablet app works and how you could use it in your own applications.
• ViewBoxes: Build a Star Rating: Learn how to build a star rating control from scratch using ViewBoxes.

Too Busy to Build?

If you're too busy to put together an Editor but have one you'd like to see, Let us know! Send your feedback to tabletbeta[at]alphasoftware.com or post your suggestions here in the Tablet Beta Forum.

[RussSoftware]

In doing audits, I routinely need to show whether or not something was OK or not. Default is always "Yes" for OK because auditors then only need to click on the items that were Not OK for some reason speeding up data entry.

The way I do it now (which I will improve upon in the tablet app) for the desktop application uses a drop-down and the choices are: Y, N, D, A, X. Y for Yes, N for No, D for No Detail Provided, A for No Applicable and X for Not Examined. If the choices are either N or D the selection is red because that is a defect.

I am trying to think of the best way to do this is a tablet app and I know I won't use a drop-down control. People will be using their finger and making the selection. We are also going to discontinue using the "D" option.

So basically I will ask the user to select with their finger: Yes, No, N/A, N/E


OK.jpg

[RussSoftware]

In doing audits, I routinely need to show whether or not something was OK or not. Default is always "Yes" for OK because auditors then only need to click on the items that were Not OK for some reason speeding up data entry.

The way I do it now (which I will improve upon in the tablet app) for the desktop application uses a drop-down and the choices are: Y, N, D, A, X. Y for Yes, N for No, D for No Detail Provided, A for No Applicable and X for Not Examined. If the choices are either N or D the selection is red because that is a defect.

I am trying to think of the best way to do this is a tablet app and I know I won't use a drop-down control. People will be using their finger and making the selection. We are also going to discontinue using the "D" option.

So basically I will ask the user to select with their finger: Yes, No, N/A, N/E


OK.jpg
OK-dropdown.jpg

Forgot to add that I was thinking of using a green checkmark for Yes/OK, red X for No, and probably just small text for NA and NE.

[Beta Spark]

In doing audits, I routinely need to show whether or not something was OK or not. Default is always "Yes" for OK because auditors then only need to click on the items that were Not OK for some reason speeding up data entry.

The way I do it now (which I will improve upon in the tablet app) for the desktop application uses a drop-down and the choices are: Y, N, D, A, X. Y for Yes, N for No, D for No Detail Provided, A for No Applicable and X for Not Examined. If the choices are either N or D the selection is red because that is a defect.

I am trying to think of the best way to do this is a tablet app and I know I won't use a drop-down control. People will be using their finger and making the selection. We are also going to discontinue using the "D" option.

So basically I will ask the user to select with their finger: Yes, No, N/A, N/E


OK.jpg
OK-dropdown.jpg

Forgot to add that I was thinking of using a green checkmark for Yes/OK, red X for No, and probably just small text for NA and NE.

Have you looked at the Switch Editor? This could be a good way to capture the information easily with minimal interface elements. They can be created as HTML elements. They support more than two states, as well.

[RussSoftware]

Yes I have. I have also looked at the Star Rating Control where I can just essentially replace the 5 Stars with a Yes green checkmark, No red X, N/A and N/E. I need to leave room for a short comment to the right of the Y/N/X/A now in my desktop application. Still playing around with options.

[invictamarine]

I use a four state response for inspection checklists to try to even out operator bias. 1 is "Excellent", 2 is "Satisfactory", 3 is "Poor" and 4 is "Needs immediate attention". either a 3 or a 4 require the user to provide additional information in another form: "Repair Requisition". I want the inspection form to automatically open the repair form whenever a 3 or a 4 is selected and also indicate that a Repair Requisition has been completed after submiting. both of these forms are embedded components in a larger app but connected to the same db.

[iRadiate]

If you're too busy to put together an Editor but have one you'd like to see, Let us know! Send your feedback to tabletbeta[at]alphasoftware.com or post your suggestions here in the Tablet Beta Forum.

Can you show how to use an Editor to edit an Ink Signature Capture using a UX control not a List data source?

Thanks,
Stephen

[Beta Spark]

Can you show how to use an Editor to edit an Ink Signature Capture using a UX control not a List data source?

Thanks,
Stephen

What do you mean by "using a UX control not a List data source"?

[iRadiate]

Hi Sarah,

After watching this video (approx 5:40) it explains how to add an editor set for an ink signature capture based on a formview and a list control .. https://www.youtube.com/watch?v=0yQT55cnhdU

I was under the impression that the editor was required to do this, but another video (which I can't find at the moment) explained that it could be based off any UX control as a data source rather than a list.

I've since figured out that this is not the case and I can call a ux component from a list click event, add my signature to an ink control, and then return back to the list and see the signature in the list. sig.png

So, I think I'm okay now, if I can only figure out how to make the eraser display

[Beta Spark]

Hi Sarah,

After watching this video (approx 5:40) it explains how to add an editor set for an ink signature capture based on a formview and a list control .. https://www.youtube.com/watch?v=0yQT55cnhdU

I was under the impression that the editor was required to do this, but another video (which I can't find at the moment) explained that it could be based off any UX control as a data source rather than a list.

I've since figured out that this is not the case and I can call a ux component from a list click event, add my signature to an ink control, and then return back to the list and see the signature in the list. sig.png

So, I think I'm okay now, if I can only figure out how to make the eraser display

A pre-built editor for capturing signatures in Ink form was added - "Editor - SignatureInk". It is a pre-configured Ink control. The SignatureInk editor was configured to match the behavior of the Signature Capture control, which allows you to save or clear the whole signature, as opposed to being able to erase parts of it. It's documented in this video: http://www.ajaxvideotutorials.com/V1...tureEditor.swf

All of our other videos on the Ink control, however, are applicable to the pre-built "Editor - SignatureInk" control since it was built with the Ink control and static text objects (and all of the code required for it to work as an Editor.) You can add and remove controls from the Ink control. In the Ink control, the tools, such as eraser or changing the pen color, are defined in the "Overlay" setting in the Ink Properties. Use the "Insert Item Attribute..." link at the bottom of the Overlay settings window to add the desired tool.

insertInkOverlayTool.png

The "Editor - SignatureInk" buttons are also defined in the Overlay settings for the Ink control.

NOTE: The "Editor - SignatureInk" is currently only available in the pre-release builds. This editor can be recreated in the current Release. It just takes a bit more work.

[iRadiate]

Thanks for the explanation Sarah, that is helpful.

One strange thing that may explain why I do not see the eraser (or any other items) ... when I insert an item into the ink overlay, it doesn't add the div tags like your screenshot shows. This is what I see:

2016-07-08_14-46-56.png

[iRadiate]

Okay, so I put an editor on the component which allowed me to copy the overlay html.
Then I deleted the editor and pasted the overlay html into the ink control. Now I have the pen, eraser, redo & undo but they are smack in the middle of my ink page.
I tried moving them above the ink control by adjusting position top, but the portion outside the ink page is invisible. Is there another way to move the tools outside the ink page? Perhaps they can be put in their own div?

Edit Tools.png

[Beta Spark]

Thanks for the explanation Sarah, that is helpful.

One strange thing that may explain why I do not see the eraser (or any other items) ... when I insert an item into the ink overlay, it doesn't add the div tags like your screenshot shows. This is what I see:

2016-07-08_14-46-56.png

Sorry about that. My screenshot was misleading. I opened an existing Ink control, which already had all the HTML. The "Insert Item Attribute..." inserts the a5-item attribute. This attribute will need to be added to an HTML element, such as a <div>.

The Eraser tool in the default Ink Editor contains the following HTML:

<div a5-item="*eraser" class="inkButton inkButtonNoPad"><svg class="inkButtonEraser" style="width: 38px; height: 38px; stroke-width: 2px;"><path d="m 12,16 8,8 -3,2.5 -6.5,0 -4.5,-4.5 z" style="fill: none;" /><path d="m 20,8 8,8 -8,8 -8,-8 z" /><rect x="12" y="26" height="2" width="20" style="stroke: none;"/></svg></div>

The Eraser icon is defined by the <svg> tag. The <path> and <rect> tags are the actual SVG image.

The outer <div> contains the a5-item, "*eraser".

If you wanted, you could display text instead of the SVG image:

<div a5-item="*eraser">Eraser Tool</div>

Or an image:

<div a5-item="*eraser"><img src="/path/to/eraser.png"/></div>

If you look at the Overlay definition for the Ink Editor (found in Predefined Controls), you will notice that there is a mix of a5-items that start with * and a5-items that don't start with a *. The ones that start with a * are built-in Alpha Anywhere a5-items with specific behaviors that you can modify through other settings in the Ink's properties.

The ones with no * are defined on the "items" tab in the Overlay definition. You can define your own tools by creating an a5-item defined on the Items tab.

Near as I can tell, we have no way to also insert the HTML for tools. Not to say that this will never change. We're working on making the Ink Control easier to use/define.

Was this more helpful?

[Beta Spark]

Okay, so I put an editor on the component which allowed me to copy the overlay html.
Then I deleted the editor and pasted the overlay html into the ink control. Now I have the pen, eraser, redo & undo but they are smack in the middle of my ink page.
I tried moving them above the ink control by adjusting position top, but the portion outside the ink page is invisible. Is there another way to move the tools outside the ink page? Perhaps they can be put in their own div?

Edit Tools.png

Positioning of the tools is done with classes. If you look at the Overlay definition again for the Ink Editor, you will notice all the controls are wrapped in a div:

<div style="position: absolute; top: 5px; width: 100%; text-align: center;">
</div>

You'll need to do the same with your controls to dock them to a specific place in the Ink control.

[iRadiate]

Thanks so much Sarah. This is all starting to make a lot more sense to me now
I've been playing with the html as well as the ink page sizing and I pretty much have what I wanted to accomplish now.

2016-07-08_16-32-50.png

[Beta Spark]

Thanks so much Sarah. This is all starting to make a lot more sense to me now
I've been playing with the html as well as the ink page sizing and I pretty much have what I wanted to accomplish now.

2016-07-08_16-32-50.png

Great!

[Beta Spark]

Thanks so much Sarah. This is all starting to make a lot more sense to me now
I've been playing with the html as well as the ink page sizing and I pretty much have what I wanted to accomplish now.

2016-07-08_16-32-50.png

Hi Stephen,

Final update - Selwyn put together a video on this subject. So - for future reference - you can watch this video: http://www.ajaxvideotutorials.com/V1...InkOverlay.swf

Second Final update - There's a second video available now that talks about Signature capture with the Ink control: http://www.ajaxvideotutorials.com/V1...Signatures.swf

These videos were added to the FormView control document, which you can find here

[DaveM]

I don't know if trhis can be used with alpha or not, but it is pretty neat
https://bootstrapstudio.io/?utm_sour...m_medium=email

[Davidk]

Here's a link to an Editor for a TextArea-Mobile-Scrollable control. It's just a modified Textbox Editor.

https://www.alphasoftware.com/alphaf...r-for-FormView