Image/Thumbnail Columns - Tablet Camera Behavior Modification [CSS/JS]
Greetings,
This question involves:
1. Image/Thumbnail Column Type [Not hyperlink/picture]
2. Tablet interaction with Image controls [specifically: on an iPad via Teams]
3. Opening the Camera
Basically, the behavior between OOB SharePoint Form's Image control and default Skybow Form Image control have noticeable differences.
I am thinking that CSS can likely make the user experience better within Skybow. JS could also be a potential solution. [I am still very new to Skybow, and trying to understand how the various syntaxes function]
Would it be possible to:
1. Increase size of the Pencil Icon [Add Image control]? (CSS)
2. Make the larger Image Icon share functionality with the Pencil Icon control? (CSS)
3. Both of above + only 1 click necessary to render the 3 Add Image options? (JavaScript)
EXAMPLES of Behavior between SharePoint & Skybow
With an OOB SharePoint form:
1. The Image Selection area is appropriate
2. It only takes 2 clicks to open the Camera [1 click to show the 3 options, 2nd click to select Camera]
Default Skybow Image Behavior & Size:
1. The larger image icon itself has no functionality [Purple border in pic 1]
2. The pencil (add/edit) and trashcan (delete) icons do have functionality
3. The pencil icon functions the same as the SP Form 'Add an image' box [Red border in picture 1]
4. When the pencil icon is clicked once, an 'Edit' cloud appears, which seems to be nothing more than a label
5. The 2nd click on the pencil icon finally displays the 3 options [Library, Take Photo, Choose]
6. The size of the pencil icon is undesirably small
After clicking Pencil icon once:
2nd Click on Pencil Icon:
Hopefully I provided enough information to make sense of my question.
Any help is absolutely appreciated!
-Taylor
-
Hi Taylor Ramsey,
let us investigate and discuss this in the team and then we will get back to you asap.
Can you tell us if the two clicks needed on the pencil icon is just on an iPad via Teams in the browser or also on an iPad via the Teams Client or as well in Safari directly on SharePoint without Teams?
Kind regards
skybow Support
0 -
I ended up testing the user experience on additional devices, through different software… (Hopefully this information is useful. I was quite surprised just how different the experience can be, especially with Android.) I am waiting for a coworker to let me use an iPhone to test a few UXs. I will follow up when I have info. If there are any other scenarios to test, let me know!
[Note: A laptop is the only device I am able to get Teams to open in a Browser, so I couldn’t test the first UX requested. On both an iPad (Safari & Chrome) & Android Phone (Chrome), I get: “Hmm. Your browser version isn’t supported. Quickest solution? Download the mobile app.”]
UX 1 – iPad – Teams App – SharePoint-type Tab
Behavior: Original experience (see original post)
UX 2 – iPad – Safari Browser
Behavior: Exactly the same as UX 1.
UX 3 – iPad – Chrome Browser
Behavior: Exactly the same as UX 1.
UX 4 – iPad – SharePoint App
(*The UX in the SharePoint App, on all devices, is rather ‘dysfunctional’. I am not sure if the screenshots are even worth posting. If they might help, let me know and I’ll post them.)
Behavior:
- New/Edit: (Read Only) is displayed next to the field label. Cannot interact with the field.
- New/Edit: Attachments field can be interacted with. Clicking it once gives 2 options: ‘Choose from Photos’ & ‘Take Photo’
- Display: Shows field labels but doesn’t render Images [Tested on a Display Form that contains Images]
UX 5 – Android Phone – Teams App – SharePoint-type Tab
(This is basically UX 1 on an Android Phone.)
Behavior: 1 click on the Pencil Icon --> Opens ‘Recent Files’
UX 6 – Android Phone – Chrome Browser
Behavior: 1 click on the Pencil Icon --> ‘All Images’ (on device) + Open Camera Fcn + Browse Fcn
(I am not exactly sure what it opens. It gives options to open Camera, Browse Files and displays ALL photos on the phone in the main view.)
Android Phone – SharePoint App
(Completely dysfunctional. Screenshots available if desired.)
Behavior:
- New/Edit: Image Fields (~30 columns) do not even render field labels
- New/Edit: Add Attachment button doesn’t function
- Display: Image Field labels are rendered, but no pictures
Much appreciated,
Taylor
0 -
CSS - Trial & Error tests
I am simply sharing because I find it interesting (& potentially useful) and would love to better understand how to control specific elements.
Below are screenshots of the 1 random trial/error attempt to alter the Icon elements of an Image field, that somewhat produced the desired effect.
This is the CSS payload used:
.ms-Button--commandBar {
font-size: 60px;
}
.ms-OverflowSet-item {
font-size: 60px;
}
.ms-Button-icon {
font-size: 60px;
}This has changed the rendering so that:
1. Pencil & Delete Icons are larger, while Picture Icon remains the same size.
2. It effects the 'Icon Size' of both Pencil/Delete & Skybow hover elements
Original Goal: Increase the Pencil Icon only. Or: Increase Pencil Icon size, and place in a better position. Or: Increase Pencil Icon size, and relocate Delete Icon to avoid accidentally deleting images by end users.
Purely Guessing: I have a feeling (SharePoint CSS is 100% new to me) that I need to make use of one of the below elements, to only alter the Pencil Icon (these are from lines 71-81 of the last screenshot below):
- class="ms-Button-icon icon-586"
- class="ms-Button-flexContainer flexContainer-505"
- class="ms-Button ms-Button--commandBar iconbutton_4d77e248 root-771"
- class="uploadInput_4d77e248"
- class="ms-TooltipHost root-757"
- "ms-OverflowSet-item item-686"
Okay... to share some pictures and other information.
Skybow - editing New Form - Styling - Progress Image 1
Note: Notice the increased size of Pencil & Delete Icons, as well as the Skybow hover action elements.
New Form
[This is the experience when in the actual New Form, launched from the SP list]
Chrome - Inspect Element - Progress Image 1
Progress Image 1 - Div Structure breakdown
0 -
Hi Taylor Ramsey,
I you just want to change the icon size of the pencil you could use the following style on each image field:
.sb-field-input i[data-icon-name="Edit"]{
font-size: 60px;
height: 35px;
}Kind regards
skybow Support
1 -
Ahhhhhh ha! Thank you so much. This make total sense now!
To share how I have utilized this little CSS nugget to eventually increase the user experience, specifically on an iPad...
.sb-field-input i[data-icon-name="Delete"]{
visibility: hidden;
}
.sb-field-input i[data-icon-name="Edit"]{
font-size: 51px;
height: 51px;
color: green;
padding: 18px 33px 2px 21px;
}
.sb-field-input [data-icon-name="Photo2"] {
font-size: 90px;
padding: 30px 10px 10px 10px;
}The result:
0
Please sign in to leave a comment.
Comments
5 comments