Get a Jumpstart with our Sample Apps
Results 1 to 19 of 19

Thread: Share your Editors

  1. #1
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Share your Editors

    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.)



    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.
    Last edited by Beta Spark; 11-03-2015 at 10:56 AM.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  2. #2
    Member
    Real Name
    Russ Brown
    Join Date
    Dec 2013
    Location
    Bedford, TX
    Posts
    31

    Default Re: Share you Editors

    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

  3. #3
    Member
    Real Name
    Russ Brown
    Join Date
    Dec 2013
    Location
    Bedford, TX
    Posts
    31

    Default Re: Share you Editors

    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.
    Last edited by RussSoftware; 10-30-2015 at 07:30 PM.

  4. #4
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share you Editors

    Quote Originally Posted by RussSoftware View Post
    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.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  5. #5
    Member
    Real Name
    Russ Brown
    Join Date
    Dec 2013
    Location
    Bedford, TX
    Posts
    31

    Default Re: Share you Editors

    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.

  6. #6
    Member
    Real Name
    Bob Beadell
    Join Date
    Jan 2012
    Location
    Victoria, BC, Canada
    Posts
    89

    Default Re: Share your Editors

    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.

  7. #7
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,369

    Default Re: Share your Editors

    Quote Originally Posted by Beta Spark View Post
    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

  8. #8
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share your Editors

    Quote Originally Posted by iRadiate View Post
    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"?
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  9. #9
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,369

    Default Re: Share your Editors

    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

  10. #10
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share your Editors

    Quote Originally Posted by iRadiate View Post
    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.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  11. #11
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,369

    Default Re: Share your Editors

    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

  12. #12
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,369

    Default Re: Share your Editors

    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

  13. #13
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share your Editors

    Quote Originally Posted by iRadiate View Post
    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:
    Code:
    <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:
    Code:
    <div a5-item="*eraser">Eraser Tool</div>
    Or an image:
    Code:
    <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?
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  14. #14
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share your Editors

    Quote Originally Posted by iRadiate View Post
    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:
    Code:
    <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.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  15. #15
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,369

    Default Re: Share your Editors

    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

  16. #16
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share your Editors

    Quote Originally Posted by iRadiate View Post
    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!
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  17. #17
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    378

    Default Re: Share your Editors

    Quote Originally Posted by iRadiate View Post
    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
    Last edited by Beta Spark; 07-08-2016 at 07:15 PM.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  18. #18
    "Certified" Alphaholic DaveM's Avatar
    Real Name
    David Mason
    Join Date
    Jul 2000
    Location
    Hudson, FL
    Posts
    5,815

    Default Re: Share your Editors

    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
    Dave Mason
    dave@aldaweb.com

    Skype is dave.mason46

  19. #19
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,195

    Default Re: Share your Editors

    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

Similar Threads

  1. Introduction to Group Editors
    By Beta Spark in forum Tablet-Optimized Form Capabilities Beta
    Replies: 1
    Last Post: 03-23-2017, 08:22 AM
  2. Editors: Using a Dropdown Box
    By Beta Spark in forum Tablet-Optimized Form Capabilities Beta
    Replies: 3
    Last Post: 02-05-2016, 04:50 PM
  3. Switch Editors
    By Beta Spark in forum Tablet-Optimized Form Capabilities Beta
    Replies: 4
    Last Post: 08-21-2015, 12:07 PM
  4. SMS share , Facebook share , whatsaap share
    By aal_fareed in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 11-25-2013, 02:43 PM
  5. WYSIWYG HTML Editors
    By David Montalbano in forum Alpha Five Version 6
    Replies: 1
    Last Post: 09-02-2004, 08:48 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •